优化 Webpack 的构建速度

Posted 2020-12-15 古兰精

1、使用高版本的 Webpack 和 Node.js

2、多进程/多实例构建：HappyPack(不维护了)、thread-loader

3、压缩代码

• webpack-paralle-uglify-plugin
• uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6)
• terser-webpack-plugin 开启 parallel 参数
• 多进程并行压缩
• 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。

4、图片压缩

• 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式)
• 配置 image-webpack-loader

5、缩小打包作用域

• exclude/include (确定 loader 规则范围)
• resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
• resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)
• resolve.extensions 尽可能减少后缀尝试的可能性
• noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
• IgnorePlugin (完全排除模块)
• 合理使用alias

6、提取页面公共资源

• 使用 html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中
• 使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ，替代了 CommonsChunkPlugin 插件
• 基础包分离：

7、DLL分包，避免反复编译浪费时间

• 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。
• HashedModuleIdsPlugin 可以解决模块数字id问题

8、充分利用缓存提升二次构建速度

• babel-loader 开启缓存
• terser-webpack-plugin 开启缓存
• 使用 cache-loader 或者 hard-source-webpack-plugin

9、Tree shaking

• purgecss-webpack-plugin 和 mini-css-extract-plugin配合使用(建议)
• 打包过程中检测工程中没有引用过的模块并进行标记，在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块，提高tree shaking效率
• 禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking
• 使用 PurifyCSS(不在维护) 或者 uncss 去除无用 CSS 代码

10、Scope hoisting

• 构建后的代码会存在大量闭包，造成体积增大，运行代码时创建的函数作用域变多，内存开销变大。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突
• 必须是ES6的语法，因为有很多第三方库仍采用 CommonJS 语法，为了充分发挥 Scope hoisting 的作用，需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的ES6模块化语法

　　更多优化请参考官网-构建性能：https://www.webpackjs.com/guides/build-performance