webpack thread-loader 对 babel-loader 的优化很少。是不是有什么问题，或者为什么？答案

【问题标题】：Webpack4 thread-loader bring little optimization for babel-loader. Is something wrong, or why?webpack thread-loader 对 babel-loader 的优化很少。是不是有什么问题，或者为什么？
【发布时间】：2021-03-31 09:28:03
【问题描述】：

正如Webpack docs和许多介绍如何提高webpack构建速度的资料中提到的，thread-loader可以明显提高babel-loader的构建速度。

但是当我在我的项目中尝试时，似乎 thread-loader 并没有为 babel-loader 带来任何优化。

我使用speed-measure-webpack-plugin来测量构建速度，有我测试的代码和结果。

我的设备： Macbook Pro（15 英寸，2018 年，6 核，12 线程）

版本信息：

{
  "webpack": "^4.41.2",
  "thread-loader": "^3.0.1",
  "babel-loader": "^8.2.2",
  "webpack-preprocessor-loader": "^1.1.3",
}

在babel-loader使用thread-loader之前，webpack.config.js的代码：

// thread-loader rule:

{
  test: /\.(jsx?)$/,
  exclude: [
    /node_modules/,
  ],
  use: [
    {
      loader: 'babel-loader',
      options: {
        babelrc: true,
        cacheDirectory: true,
        rootMode: 'upward',
      }
    }, {
      loader: 'webpack-preprocessor-loader',
      options: {
        params: env
      }
    }]
}

时间成本：

 SMP  ⏱  Loaders
thread-loader, and
babel-loader, and
webpack-preprocessor-loader took 15.71 secs
  module count = 315

之后：

// thread-loader warmup:
const threadLoader = require('thread-loader');
const threadLoaderOptions = {
  poolTimeout: 2000,
  name: 'thread-loader-for-babel'
}

threadLoader.warmup(threadLoaderOptions, [
  'webpack-preprocessor-loader',
  'babel-loader'
]);

// thread-loader rule:
{
  test: /\.(jsx?)$/,
  exclude: [
    /node_modules/,
  ],
  use: [
    {
      loader: 'thread-loader',
      options: threadLoaderOptions
    },
    {
      loader: 'babel-loader',
      options: {
        babelrc: true,
        cacheDirectory: true,
        rootMode: 'upward',
      }
    }, {
      loader: 'webpack-preprocessor-loader',
      options: {
        params: env
      }
    }]
}

时间成本：

 SMP  ⏱  Loaders
thread-loader, and
babel-loader, and
webpack-preprocessor-loader took 14.64 secs
  module count = 313

15.71s VS 14.64s，这个效果不明显。

thread-loader将babel-loader的工作从串行执行改为并行执行，理论上在我6核12线程的设备上，即使考虑到worker启动时间等因素，至少也会有好几倍的提升，但事实并非如此。

是否正确使用了线程加载器？（应该是对的，我试过修改thread-loader和log的源码，保证多个worker在运行）如果使用正确，效果不明显的原因是什么？

我有一个猜测。对于命中同一个loader的模块，webpack 4内置了多线程处理，也就是说webpack已经做好了thread-loader的工作。所以thread-loader作用不大。但是这个猜测需要深入到webpack 4源码中去验证。

（我会继续研究，但是需要一段时间，如果有研究过的，请分享）

提前致谢。 :)

【问题讨论】：

标签： javascript webpack babeljs webpack-4 webpack-loader

【解决方案1】：

为什么它不那么快的可能原因是这些原因（在documentation上找到）：

Loaders running in a worker pool are limited. Examples:

Loaders cannot emit files.
Loaders cannot use custom loader API (i. e. by plugins).
Loaders cannot access the webpack options.

【讨论】：