當前位置:吉日网官网 - 傳統故事 - Webpack-打包優化方案

Webpack-打包優化方案

分析包文件

要優化,先分析。我們首先需要知道是什麽減慢了我們的打包速度。

您可以使用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等其他優化方法。

  • 上一篇:十字軍之王3攻略生活方式解析風暴騎士攻略在王國的生活方式詳解。
  • 下一篇:“三教”是指
  • copyright 2024吉日网官网