入職后接手website-html和website-mobile項目，發現項目加載速度不太理想，於是結合自己之前的經驗對項目做了優化。此篇文章主要記錄這次優化詳情。
原始項目：
開發環境：
website-html： app.js 8.1MB
website-mobile： app.js 8.2MB
線上環境：
website-html： app.js：1.1MB 加載時間：3.46s（平均）
website-mobile： app.js 1.2MB 加載時間： 1.64s （平均）
優化過程：
優化vue-cli構建的項目一般分為工程層面和代碼層面，這次主要在工程層面做優化，思路如下：
1.是否采用了懶加載；
2.是否打包了vue，vue-router這些類庫；
3.是否開啟壓縮；
4.是否打包了map文件；
經過檢查項目工程，發現路由組件已經使用懶加載方式引入（1），map文件未打包（4）；
所以我只針對（2）（3）做了優化；
對於第二條，對於項目依賴的類庫文件，如果打包進bundle中，會大大增加打包后的項目體積，所以我們一般通過webpack配置external來從外部去獲取這些依賴的包（https://www.bootcdn.cn）；
在webpack.base.conf.js文件里
添加如下代碼：（用到哪些就指明哪些）
在index.js取消這些類庫的import和use：
在index.html中引入這些類庫的cdn：
針對第三點，之前會好奇，我后端服務器開啟了gzip，那么前端配置這個有什么用？
其實，nginx給你返回js文件的時候，會判斷是否開啟gzip，然后壓縮后再還給瀏覽器。但是nginx其實會先判斷是否有.gz后綴的相同文件，有的話直接返回，nginx自己不再進行壓縮處理。
而壓縮是要時間的！不同級別的壓縮率花的時間也不一樣。
所以提前准備gz文件，可以更加優化。
而webpack配置productionGzip，需要一個插件配合compression-webpack-plugin，所以需要先在項目中安裝npm install --save-dev compression-webpack-plugin；
經過以上簡單的優化之后，查看下效果：
開發環境：
website-html： app.js 1.6MB（原始8.1MB） 精簡率80.2%
website-mobile： app.js 1.6MB（原始8.2MB） 精簡率80.5%
線上環境（打包壓縮后）：
website-html： app.js：177KB（原始1.1MB） 加載時間：722ms（3.46s）（平均） 體積精簡率84.4% 加載速度提升79.1%
website-mobile： app.js 187KB（原始1.2MB） 加載時間： 705ms（1.64s）（平均） 體積精簡率84.9% 加載速度提升57%
除此之外，后續可優化的點還有：
1.取消JQ的引入，自定義用到的JQ方法；
2.取消iview的引入，自定義message組件；
3.取消museUI的引入，自定義menu組件；