thread-loader 技术文档

1. 安装指南

1.1 使用 npm 安装

npm install --save-dev thread-loader

1.2 使用 yarn 安装

yarn add -D thread-loader

1.3 使用 pnpm 安装

pnpm add -D thread-loader

2. 项目的使用说明

thread-loader 是一个用于在 Webpack 构建过程中将后续的加载器运行在 worker 池中的工具。通过将耗时的加载器任务分配到多个 worker 中并行处理，可以显著提高构建性能。

2.1 基本使用

在 Webpack 配置文件中，将 thread-loader 放置在其他加载器之前。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          'thread-loader',
          // 你的耗时加载器（例如 babel-loader）
        ],
      },
    ],
  },
};

2.2 使用选项

你可以通过配置选项来调整 thread-loader 的行为：

use: [
  {
    loader: 'thread-loader',
    options: {
      // 启动的 worker 数量，默认为 (CPU 核心数 - 1)，如果无法获取 CPU 核心数，则默认为 1
      workers: 2,

      // 每个 worker 并行处理的作业数量，默认为 20
      workerParallelJobs: 50,

      // 传递给 worker 的额外 node.js 参数
      workerNodeArgs: ['--max-old-space-size=1024'],

      // 允许重新启动死掉的 worker 池，这会减慢整个编译过程，建议在开发环境中设置为 false
      poolRespawn: false,

      // 空闲时杀死 worker 进程的超时时间，默认为 500ms，可以设置为 Infinity 以在监视模式下保持 worker 存活
      poolTimeout: 2000,

      // 池分配给 worker 的作业数量，默认为 200，减少此值可以提高分配的公平性但会降低效率
      poolParallelJobs: 50,

      // 池的名称，可以用于创建具有相同选项的不同池
      name: 'my-pool',
    },
  },
  // 你的耗时加载器（例如 babel-loader）
];

2.3 预热 worker 池

为了避免启动 worker 时的延迟，你可以预热 worker 池：

const threadLoader = require('thread-loader');

threadLoader.warmup(
  {
    // 池选项，必须与加载器选项匹配以启动正确的池
  },
  [
    // 需要加载的模块
    'babel-loader',
    'babel-preset-es2015',
    'sass-loader',
  ]
);

3. 项目 API 使用文档

3.1 threadLoader.warmup(options, modules)

• options: 对象，包含池的配置选项。
• modules: 数组，包含需要预加载的模块。

此方法用于预热 worker 池，减少启动时的延迟。

4. 项目安装方式

thread-loader 可以通过 npm、yarn 或 pnpm 进行安装，具体命令如下：

• npm:

  npm install --save-dev thread-loader
  

• yarn:

  yarn add -D thread-loader
  

• pnpm:

  pnpm add -D thread-loader
  

通过以上步骤，你可以成功安装并配置 thread-loader，从而优化你的 Webpack 构建性能。