问答

Webpack 4 使用 thread-loader 为 babel-loader 构建提速,为什

作者:admin 2021-04-16 我要评论

看了 webpack 官方以及网上一些资料,都表示 thread-loader 能够以多线程的方式,为 babel-loader 等 loader 构建过程提速。 但是实际试用了一下,几乎没有效果...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

看了 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 源码去验证了。(我会继续研究,但需要一些时间,如果有研究过的童鞋欢迎讨论呀~)

感谢解答!

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器