Webpack 4 使用 thread-loader 为 babel-loader 构建提速,为什么构建速度几乎没有任何提升?
看了 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
楼主找到原因了吗?我的也是发现没有什么变化,感觉比以前还慢了1-2s。。。