項目越做越大剧蹂，到底項目打包完部署到服務(wù)器上訪問加載速度很慢爆安，本文就是為了解決這個問題氢烘。有更好的解決方案歡迎大家留言怀偷。我會及時更新文檔。
前言
但隨著項目越做越大威始，依賴的第三方 npm 包越來越多枢纠，構(gòu)建之后的文件也會越來越大。
尤其是 vendor.js, 甚至?xí)_(dá)到 2M 左右黎棠。再加上又是單頁應(yīng)用晋渺，這就會導(dǎo)致在網(wǎng)速較慢或者服務(wù)器帶寬有限的情況出現(xiàn)長時間的白屏。
為了解決這個問題脓斩，我做了一些探索木西，在幾乎不需要改動業(yè)務(wù)代碼的情況下。
找到了三種有明顯效果的優(yōu)化方案
- 一随静、CDN
- 二八千、Gzip
- 三、Prerender
一燎猛、首先考慮CDN 優(yōu)化（簡單粗暴）
構(gòu)建后文件說明
1.app.css： 壓縮合并后的樣式文件恋捆。
2.app.js：主要包含項目中的 App.vue、main.js重绷、router沸停、store 等業(yè)務(wù)代碼。
3.vendor.js：主要包含項目依賴的諸如 vuex昭卓，axios 等第三方庫的源碼愤钾，這也是為什么這個文件如此之大的原因瘟滨，下一步將探索如何優(yōu)化這一塊，畢竟隨著項目的開發(fā)能颁，依賴的庫也能會越來越多杂瘸。
4.mainfest.js：mainfest 的英文有清單、名單的意思伙菊，該文件包含了加載和處理路由模塊的邏輯败玉。
項目加載發(fā)現(xiàn)這兩個文件較大，采用cdn優(yōu)化
- 1 镜硕、 將依賴的 vue绒怨、vue-router、vuex谦疾、element-ui 和 axios 這五個庫南蹂，全部改為通過 CDN 鏈接獲取，在index.html 里插入 js 和 css 的 BootCDN免費(fèi)網(wǎng)址鏈接念恍。
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<link rel="stylesheet" >
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
- 2六剥、 添加webpack.config.js配置文件
externals:{
'vue-router': 'VueRouter',
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT',
'vuex': 'Vuex',
},
-3、 卸載依賴的 npm 包峰伙，npm uninstall axios element-ui vue vue-router vuex疗疟；
-4、刪除main文件里之前的引包方式
// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'
import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'
import echarts from 'echarts'
Vue.use(ELEMENT)
Vue.use(VueRouter)
Vue.prototype.$http = utils.httpInit();
Vue.prototype.$WebSocket = utils.webSocketInit;
Vue.prototype.$echarts = echarts;
const router = new VueRouter({
// mode: 'history',
mode: 'hash', //路由的模式
routes
})
new Vue({
router,
el: '#app',
render: h => h(App)
})
優(yōu)化前：
優(yōu)化后：
發(fā)現(xiàn)vendor這個文件只有144bytes瞳氓，index
| 文件 | 優(yōu)化前 | 優(yōu)化后 |
|---|---|---|
| vendor.js | 1.52M | 144bytes |
| index.js | 5.29M | 3.86M |
二策彤、Gzip 優(yōu)化
使用 Gzip 兩個明顯的好處，一是可以減少存儲空間匣摘，二是通過網(wǎng)絡(luò)傳輸文件時店诗，可以減少傳輸?shù)臅r間。
1.如何開啟 gzip 壓縮
開啟 gzip 的方式主要是通過修改服務(wù)器配置音榜，以 nginx 服務(wù)器為例庞瘸。
下圖是使用同一套代碼，在僅改變服務(wù)器的 gzip 開關(guān)狀態(tài)的情況下的 Network 對比圖：
未開啟 gzip 壓縮：
開啟 gzip 壓縮：
開啟 gzip 壓縮后的響應(yīng)頭：
從上圖可以明顯看出開啟 gzip 前后赠叼，文件大小有三四倍的差距擦囊，加載速度也從原來的 7 秒多，提升到 3 秒多嘴办。
附上 nginx 的配置方式：
http {
gzip on;
gzip_static on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
}
我們都知道config/index.js里有一個productionGzip的選項瞬场，那么它是做什么用的？
我們嘗試執(zhí)行npm install --save-dev compression-webpack-plugin@1.x, 并把productionGzip設(shè)置為true涧郊，重新build贯被，放在 nginx 服務(wù)器下，看看有什么區(qū)別：
我們會發(fā)現(xiàn)構(gòu)建之后的文件多了一些 js.gz 和 css.gz 的文件，而且 vendor.js 變得更小了刃榨。
這其實是因為我們開啟了 nginx 的 gzip_static on; 選項，如果 gzip_static 設(shè)置為 on, 那么就會使用同名的.gz 文件双仍，不會占用服務(wù)器的 CPU 資源去壓縮枢希。
