VUE移動端項目打包優化整理

版本：vue2.0+ 構建工具 vue-cli 打包工具webpack

一、項目構建完成，首次打包後發現打包過程很慢，查看生成的文件中有一個map文件，其功能主要是用於測試，取消生成map文件，找到config/index.js，箭頭所指的地方修改成false便可

二、打包後首屏加載速度慢，加載的資源中vendor.js過大，是由於引用的第三方庫過多致使，能夠把其中vue vuex vue-router 以及axios分離出來採用cdn加載，在index.html中引入

而後找到build/webpack.base.conf.js，在module.exports中添加如下代碼

而後還需查看router中各組件的加載方式是不是按需加載，統一改成如下方式

再次打包後，會發現生成了不少1.xxx.js, 2.xxx.js等，而後 vendor文件也比最初小了不少

三、時間久了以後，項目需求增多，致使項目體積變大，這時能夠考慮開啓GZIP壓縮，找到config/index.js中，修改如下配置

而後在build/webpack.prod.conf.js中找到如下代碼修改

而後再次打包，可能會報錯TypeError: Cannot read property 'emit' of undefined

這時候須要先卸載以前的compression-webpack-plugin

安裝1.12版本的compression-webpack-plugin

卸載命令：npm uninstall --save-dev compression-webpack-plugin

安裝1.12命令：npm install --save-dev compression-webpack-plugin@1.1.2

再次運行後打包正常

四、打包後只會生成一個app.css，若是體積過大，而且各組件多使用了scoped樣式，則在build/webpack.prod.conf.js中可配置，禁止合併到打包後的app.css，找到allChunks，修改成false,以下：

五、最後打包時，webpack會默認將10K如下的圖片轉化爲base64，若是項目中的圖片過多（base64過多，也會致使文件過大,考慮到首屏速度），能夠考慮修改如下的數值（build/webpack.case.conf.js），單位爲b，而後在合適的地方採用懶加載的方式加載圖片