webpack如何启用多线程打包？

Webpack 启用多线程打包可以通过使用一些插件来提高构建速度，最常用的插件是 thread-loader 和 fork-ts-checker-webpack-plugin。以下是一些常见的做法：

1. 使用 thread-loader

thread-loader 插件可以通过将部分 loader 的工作分配到子进程中来并行化工作，显著提高构建速度。

安装 thread-loader

npm install thread-loader --save-dev

配置 thread-loader

在 webpack.config.js 中，你可以这样配置 thread-loader：

const path = require('path');
const ThreadLoader = require('thread-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 2, // 你可以根据你的机器配置调整 worker 数量
            },
          },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
        include: path.resolve(__dirname, 'src'),
      },
    ],
  },
};

在上面的配置中，thread-loader 被用来包装 babel-loader，并且 workers: 2 表示会启动两个子进程来并行处理文件。

2. 使用 fork-ts-checker-webpack-plugin（用于 TypeScript）

如果你使用 TypeScript，fork-ts-checker-webpack-plugin 可以将类型检查的任务放到一个独立的线程中，从而加快构建速度。

安装插件

npm install fork-ts-checker-webpack-plugin --save-dev

配置 fork-ts-checker-webpack-plugin

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: './tsconfig.json',
      },
    }),
  ],
};

这样就会启动一个独立的线程进行 TypeScript 类型检查，从而避免阻塞主线程。

3. 使用 webpack-parallel-uglify-plugin（用于压缩）

如果你在构建时使用了压缩插件，可以通过并行化压缩过程来提高速度。webpack-parallel-uglify-plugin 是一个常见的选择。

安装插件

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

配置插件

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache',
      uglifyJS: {
        compress: {
          warnings: false,
          drop_console: true,
        },
        output: {
          comments: false,
        },
      },
    }),
  ],
};

4. 使用 webpack 内置的 parallelism 配置

Webpack 5 引入了 parallelism 配置项，它允许你在内置的并行构建过程中指定并发的进程数。这对一些内置任务（如编译和压缩）也有一定的性能提升。

配置 parallelism

module.exports = {
  stats: 'errors-warnings',
  parallelism: 4, // 设置并行进程数
};

总结

• thread-loader 用于将任务分配给多个线程，适用于大多数场景。
• fork-ts-checker-webpack-plugin 用于 TypeScript 类型检查，提升构建速度。
• webpack-parallel-uglify-plugin 用于并行化压缩任务。
• parallelism 是 Webpack 内置的配置，指定并行进程数。

通过这些插件和配置，你可以大大加速 Webpack 的构建过程，尤其是在处理大型项目时。但是如果是小项目，建议就不要开启多线程打包，因为小项目开启多线程，有时候不仅不能提高打包速度，反而会降低打包速度，只有项目达到一定的规模才有效果。