Question

webpack-打包优化方案

Answer 1

分析打包文件

要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？

可以利用 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 插件是使 import() 替换成 require 编译

修改 .babelrc 文件

注意 ：使用插件 build 后没有 chunk files 文件。

通过 DllPlugin 插件分离出第三方包

使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。

需要注意

项目经过以上优化，打包从 30 分钟，到 2 分钟不到，整体还有优化空间，可以使用其他 cdn 等优化方式。