如何解决Webpack4 线程加载器对 babel-loader 几乎没有优化有什么问题吗,或者为什么?
Webpack docs 和很多介绍如何提高 webpack 构建速度的资料中提到,thread-loader 可以明显提高 babel-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?)$/,use: [
{
loader: 'thread-loader',options: threadLoaderOptions
},{
loader: '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源码中去验证。
(我会继续研究,但是需要一些时间。如果有谁研究过,请分享)
提前致谢。 :)
解决方法
速度不快的可能原因是这些原因(在 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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。