項目的圖片比較多，有大圖有小圖，小圖沒用 iconfont，直接打包進 js 了，然后首頁渲染就比較慢
解決方案：
- 圖片壓縮
- nginx 緩存
- lazy-load
- skeleton
- cdn
- oss
- 圖片服務器
實際解決方案：
- 所有圖片都壓縮一遍 壓縮網址
- 大圖渲染優化：vue-lazyload 這個插件文檔有例子針對 css bg，但是我試了沒有效果?
- 小圖渲染優化：用 iconfont
- nginx 不會，先不做
- cdn 要錢，不做
- oss 讓客戶買
- 圖片服務器，這個可以用 oss 代替
skeleton 骨架屏這個實際上并沒有優化首屏渲染，只是讓用戶知道他在等...
餓了么有個 2k star 的開源項目，然后我想看例子的時候，依賴好難裝，終于裝上跑起來，又報錯，就沒有用他了
骨架屏的原理就是在 app 節點渲染前顯示出來，而不是全白的，app 節點顯示了之后就把他刪掉，看效果的話可以將調試面板的 network 改成 3g slow
// router.js
router.beforeEach((to, from, next) => {
const skeleton = document.getElementById("skeleton")
if (skeleton) {
document.body.removeChild(skeleton)
}
next()
})
// index.html 寫上你的 skeleton 的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>skeleton </title>
</script>
<style>
#skeleton {
padding: 40px 20px;
}
#skeleton > div {
height: 30px;
background: #999;
margin-bottom: 15px;
animation: loadingSubTitle 3s infinite;
}
#skeleton > div:nth-child(4n+1) {
width: 100%;
height: 50px;
background: #ccc;
animation: loadingTitle 8s infinite;
}
#skeleton > div:nth-child(4n+1):not(:first-child) {
margin-top: 50px;
}
@keyframes loadingTitle {
from {
width: 10%;
opacity: 0.1;
}
to {
width: 55%;
opacity: 1;
}
}
@keyframes loadingSubTitle {
from {
width: 10%;
opacity: 0.1;
}
to {
width: 100%;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="skeleton">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
