Webpack 4 使用 thread-loader 为 babel-loader 构建提速,为什么构建速度几乎没有任何提升?

发布于 2022-09-12 23:03:22 字数 2275 浏览 21 评论 0

看了 webpack 官方以及网上一些资料,都表示 thread-loader 能够以多线程的方式,为 babel-loader 等 loader 构建过程提速。

但是实际试用了一下,几乎没有效果。

设备:
Macbook Pro 15-inch(6核12线程)

$ node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> require('os').cpus().length
12

相关版本信息:

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

使用 thread-loader 之前的代码:

// 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,使用后 14.64s,这效果并不明显。如果从串行执行改为并行,理论上在我这个6核12线程的设备,即使算上 worker 启动耗时等因素,起码也要有好几倍的提升,然而并没有。

问题:
thread-loader 的使用是否正确?(应该没错的,我有试过修改 thread-loader 源码打 log,能够确保运行了多个 worker)
如果使用正确,那么速度没提升的原因是什么呢?

PS:
我有一个猜测,可能是对于命中同一个 loader 的模块,webpack 4 本身就已经内置了多线程的处理。所以 thread-loader 几乎起不到什么作用。不过这个猜测需要深入到 webpack 4 源码去验证了。(我会继续研究,但需要一些时间,如果有研究过的童鞋欢迎讨论呀~)

感谢解答!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

楠木可依 2022-09-19 23:03:22

楼主找到原因了吗?我的也是发现没有什么变化,感觉比以前还慢了1-2s。。。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文