最近開發(fā)一套后臺(tái)管理系統(tǒng)雕沉，遇到首頁(yè)加載很慢的問題，技術(shù)棧是 vue全家桶 + elementUI + echarts 去件。首次加載大概需要50s坡椒，頁(yè)面才能出來扰路。
偶爾快一點(diǎn)的時(shí)候
總結(jié)如下原因：
原因1：由于vendor.js和app.css較大，UI渲染線程并不會(huì)優(yōu)先加載他倆倔叼，但是VUE等主流的單頁(yè)面框架都是js渲染html body的,所以必須等到vendor.js和app.css加載完成后完整的界面才會(huì)顯示汗唱。
原因2：還有一個(gè)原因就是單頁(yè)面首次會(huì)把所有界面和接口都加載出來，會(huì)有多次的請(qǐng)求和響應(yīng)丈攒，數(shù)據(jù)不能馬上加載
二者相加所以會(huì)有長(zhǎng)時(shí)間的白屏哩罪。
解決方式如下：
vue-router 路由懶加載
路由懶加載寫法- 使用CDN加載
index.html引入cdn
webpack.base.conf.js
- 防止編譯文件中出現(xiàn)map文件。
config/index.js文件中設(shè)置productionSourceMap為false
config/index.js
- 使用gzip壓縮
1). 修改config/index.js文件下productionGzip：true ;
2). 安裝依賴npm install --save-dev compression-webpack-plugin@1.1.11巡验。（注：這里為啥要指定版本號(hào)呢际插，是因?yàn)楦甙姹镜囊蕾嚂?huì)報(bào)錯(cuò)，我使用的1.1.11版本是沒報(bào)錯(cuò)）
- 去掉代碼中的console.log
打包之后控制臺(tái)很干凈显设，部署正式環(huán)境之前最好這樣做框弛。參考
參考的方法，親測(cè)有效
最后來看下打包后的效果吧：
文件還是比較小的
