在前端开发中，Webpack 作为一个主流的模块化打包工具，在项目实践中得到了广泛的应用。然而，在处理大型项目时，随着模块的不断增多，Webpack 的打包速度问题渐渐浮现。这时候，我们就需要花费一些时间去思考和优化打包速度。
本篇文章将从基础的 Webpack 配置出发，详细讲解 Webpack 打包速度优化的各种方法和技巧，并提供示例代码作为参考。
1. 模块解析
在 Webpack 编译过程中，模块解析是其中一个比较耗时的步骤，如果能缩短模块解析时间，就能提高打包速度。
1.1 减少模块查找范围
Webpack 的模块查找范围默认是 node_modules 文件夹，你可以通过配置 resolve.modules 属性来缩小模块查找范围，只查找指定的文件夹。
// webpack.config.js module.exports = { // ...其他配置... resolve: { modules: ['src', 'node_modules'] } }
上例中，Webpack 只会在 src 文件夹和 node_modules 文件夹中查找模块，可以减少不必要的查找。
1.2 缓存模块解析结果
Webpack 在每次编译时会重新处理一遍所有模块，而大部分模块都没有改变。因此，我们可以开启缓存，缓存模块解析的结果，省去不必要的计算。
在 Webpack 4.0 中，开启缓存可以直接配置 cache 属性。
// webpack.config.js module.exports = { // ...其他配置... cache: true }
1.3 使用绝对路径
如果使用了相对路径，Webpack 在解析模块时会去拼接模块路径，这会浪费一些时间。建议使用绝对路径。
举个例子，假设我们有一个模块 foo.js 和一个模块 bar.js，在 foo.js 中引入 bar.js：
// foo.js import bar from '../lib/bar.js';
这里使用了相对路径，在解析 foo.js 时，Webpack 会根据它的相对路径去拼接出 bar.js 的绝对路径，这会耗费一些时间。
// foo.js 解析后的代码 import bar from 'absolute/path/to/project/lib/bar.js';
使用绝对路径可以避免这样的问题。
2. 插件优化
Webpack 的插件系统在项目打包过程中起到了很大的作用。有一些插件可以优化打包速度。
2.1 使用 HappyPack
HappyPack 是 Webpack 插件，可以在多进程中运行 loader，以减少 loader 占用的时间，优化项目构建时间。
首先，我们需要安装 happypack：
npm install --save-dev happypack
然后，配置 module.rules 中使用 happypack/loader：
-- -------------------- ---- ------- -- ----------------- ----- --------- - --------------------- -------------- - - -- ---------- ------- - ------ - - ----- -------- -------- --------------- ---- ------------------------ -- -- ---------------- - - -- -------- - --- -------------- ----- -------- ------------------ -- -- --------- -- - -展开代码
2.2 使用 ParallelUglify
UglifyJSPlugin 是 Webpack 官方提供的压缩插件，这个插件使用了单线程模式，如果项目中需要压缩非常多的文件，压缩时间就会非常长。
ParallelUglify 是 Webpack 插件，可以使用多进程模式压缩文件，可以大大缩短压缩时间。首先安装 parallel-uglify-plugin：
npm install --save-dev parallel-uglify-plugin
然后添加 ParallelUglifyPlugin 插件到配置文件：
-- -------------------- ---- ------- -- ----------------- ----- -------------------- - ---------------------------------- -------------- - - -- ---------- -------- - --- ---------------------- --------- - ------- - --------- ------ --------- ----- -- --------- - --------- ------ ------------- ---- - - -- - -展开代码
上面调用了 ParallelUglifyPlugin，将 uglifyJS 压缩选项传入，实现多进程压缩。
3. chunk 分割优化
Webpack 将所有的模块打包成一个或多个 bundle，这些 bundle 又进一步拆分成小的 chunk。在项目中，chunk 的数量和大小会影响打包速度。
3.1 减少 chunk 数量
通过减少 chunk 数量可以迅速提高打包速度，例如将应用程序和依赖库打包在一起。
-- -------------------- ---- ------- -- ----------------- -------------- - - -- ---------- ------------- - ------------ - ------------ - -------- - ------- ---------- -- ----- --- ----- ---------- -- -- ----- - ----- ------------------- -- -- ----- ----- ------ - - -------- - -- ------- - -- ------- - ----- --------------- ------- ---------- -- ----- --- ----- ----- --------- --------- --- -------- ---- - - - - -展开代码
上例中，我们使用 optimization.splitChunks 配置将 commons 和 vendor 打包到来减少 chunk 数量，优化打包速度。其中，commons 代表将要拆分出的公共模块，vendor 代表 node_modules 中的模块。
3.2 减小 chunk 体积
如果 chunk 的体积过大，也会影响打包速度。通过减小 chunk 体积，可以提高打包速度。
可以通过减少 chunk 中的元数据来实现减小 chunk 体积。
// webpack.config.js module.exports = { // ...其他配置... optimization: { runtimeChunk: 'single' } }
上例中，开启了 optimization.runtimeChunk 配置后，只会拆分出一个 runtime chunk，减少了其他 chunk 的体积。
结语
本篇文章从模块解析、插件优化和 chunk 分割优化三个方面来讲解了 Webpack 的打包速度优化方法和技巧，如果你在项目打包的过程中遇到了打包速度慢的问题，可以尝试按照上述方法进行优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d00016e46428fe9ec6e7db
