WebPack 中如何优化构建速度？-JavaScript中文网-JavaScript教程资源分享门户

WebPack 是前端开发中常用的打包工具，可以将多个 JavaScript 文件打包成一个文件，同时也支持打包其他静态资源。但是在项目的开发过程中，随着代码的增多和依赖的增加，WebPack 的构建速度也会变得越来越慢。本文将介绍 WebPack 中如何优化构建速度，让你的项目更加高效。

优化构建速度的方法

1. 使用 WebPack 的缓存

WebPack 提供了缓存机制，可以在多次构建中重用未改变的模块，从而提高构建速度。在 WebPack 配置文件中，可以通过设置 cache 属性来开启缓存：

module.exports = {
  // ...
  cache: true,
  // ...
};

2. 使用多进程/多线程构建

WebPack 默认是单进程构建，可以通过使用多进程或多线程来提高构建速度。有两种方式可以实现多进程/多线程构建：

使用 HappyPack 插件

HappyPack 插件可以将模块的解析和编译任务分配给多个子进程或子线程，从而实现多进程/多线程构建。使用 HappyPack 插件需要先安装：

npm install happypack --save-dev

然后在 WebPack 配置文件中进行如下配置：

// javascriptcn.com 代码示例
const HappyPack = require('happypack');
const os = require('os');

module.exports = {
  // ...
  plugins: [
    new HappyPack({
      id: 'js',
      threads: os.cpus().length,
      loaders: ['babel-loader'],
    }),
  ],
  // ...
};

上述配置将使用 babel-loader 对 JavaScript 模块进行编译，并将编译任务分配给和 CPU 核心数量相同的子线程。

使用 thread-loader 加载器

thread-loader 加载器可以将模块的解析和编译任务分配给一个或多个子进程或子线程，从而实现多进程/多线程构建。使用 thread-loader 加载器需要先安装：

npm install thread-loader --save-dev

然后在 WebPack 配置文件中进行如下配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['thread-loader', 'babel-loader'],
      },
    ],
  },
  // ...
};

上述配置将使用 thread-loader 加载器将编译任务分配给一个子线程。

3. 减少构建的模块数量

在 WebPack 配置文件中，可以通过配置 entry 和 externals 属性来减少构建的模块数量。entry 属性指定 WebPack 构建的入口文件（一般是应用程序的入口文件），externals 属性指定应该被视为外部模块的文件或库，不会被 WebPack 打包。这样可以减少构建的模块数量，从而提高构建速度。

module.exports = {
  entry: './src/index.js',
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  // ...
};

上述配置将不会将 react 和 react-dom 打包进最终的 JavaScript 文件。

4. 使用 DLLPlugin

DLLPlugin 可以将第三方库（如 React、jQuery 等）打包成一个独立的文件，从而避免每次构建都需要重新打包这些库。使用 DLLPlugin 需要先创建一个配置文件，然后在 WebPack 配置文件中引入该配置文件：

// javascriptcn.com 代码示例
// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'redux', 'react-redux', 'lodash'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_library',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.resolve(__dirname, 'dist/[name].manifest.json'),
    }),
  ],
};

// javascriptcn.com 代码示例
// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor.manifest.json'),
    }),
  ],
  // ...
};

上述配置将会将 React、React-DOM、Redux、React-Redux 和 Lodash 打包成一个独立的文件，然后在 WebPack 配置文件中引入该文件。

总结

本文介绍了 WebPack 中如何优化构建速度的方法，包括使用 WebPack 的缓存、使用多进程/多线程构建、减少构建的模块数量和使用 DLLPlugin。通过使用这些方法，可以提高 WebPack 的构建速度，让项目更加高效。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65736489d2f5e1655dc80695