要優化,先分析。我們首先需要知道是什麽減慢了我們的打包速度。
您可以使用webpack-bundle-analyzer插件來分析我們打包後生成的文件。
修改webpack.prod.conf.js文件。
Simple-progress-webpack-plugin可以顯示打包百分比。
修改webpack.prod.conf.js文件。
效果如下:
資源和依賴包的控制
從上面的進度可以看出,在打包過程中,壓縮的地方過長。當項目越來越臃腫的時候,我們需要整理項目的靜態資源和依賴包。
項目中用到的ElementUI和Echarts都是在Vue.prototype上引用的,現在都是按需引用。
在預處理各種文件時指定匹配目錄後,webpack在解析文件時不會循環搜索其他目錄,這樣會加快解析速度。
Webpack在預處理文件時是單線程的。我們可以用happypack來多線程文件。
修改webpack.base.js文件。
babel-plugin-dynamic-import-node插件是用require代替import()編譯的。
修改。babelrc文件
註意:使用插件構建後,沒有塊文件。
通過DllPlugin插件分離第三方包
使用add-asset-html-webpack-plugin將dll.js動態添加到html中。
需要註意的是
經過以上優化,套餐從30分鐘用時不到2分鐘,整體還有優化空間。可以使用cdn等其他優化方法。