从零开始的 Webpack4.0 打包速度优化（篇一）-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，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：

// www.javascriptcn.com code example
// webpack.config.js
const HappyPack = require('happypack');
module.exports = {
  // ...其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js' // 使用 happypack/loader
      }
    ]
  },
  plugins: [
    new HappyPack({id: 'js', loaders: ['babel-loader']}) // 添加 HappyPack 插件
  ]
}

2.2 使用 ParallelUglify

UglifyJSPlugin 是 Webpack 官方提供的压缩插件，这个插件使用了单线程模式，如果项目中需要压缩非常多的文件，压缩时间就会非常长。

ParallelUglify 是 Webpack 插件，可以使用多进程模式压缩文件，可以大大缩短压缩时间。首先安装 parallel-uglify-plugin：

npm install --save-dev parallel-uglify-plugin

然后添加 ParallelUglifyPlugin 插件到配置文件：

// www.javascriptcn.com code example
// webpack.config.js
const ParallelUglifyPlugin = require('parallel-uglify-plugin');
module.exports = {
  // ...其他配置...
  plugins: [
    new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false,
          comments: false
        },
        compress: {
          warnings: false,
          drop_console: true
        }
      }
    })
  ]
}

上面调用了 ParallelUglifyPlugin，将 uglifyJS 压缩选项传入，实现多进程压缩。

3. chunk 分割优化

Webpack 将所有的模块打包成一个或多个 bundle，这些 bundle 又进一步拆分成小的 chunk。在项目中，chunk 的数量和大小会影响打包速度。

3.1 减少 chunk 数量

通过减少 chunk 数量可以迅速提高打包速度，例如将应用程序和依赖库打包在一起。

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...其他配置...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial', // entry 启动的 chunk
          minChunks: 2, // 至少被引用 2 次才被拆分
          maxInitialRequests: 5, // entry chunk 最多只分割出 5 个
          minSize: 0 // 文件最小体积为 0
        },
        vendor: {
          test: /node_modules/,
          chunks: 'initial', // entry 启动的 chunk
          name: 'vendor',
          priority: 10,
          enforce: true
        }
      }
    }
  }
}

上例中，我们使用 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

从零开始的 Webpack4.0 打包速度优化 （篇一）