webpack系列文章:
- 【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
- 【Webpack 性能优化系列(7) - 懒加载和预加载】
- 【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle,优化资源加载
- 【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码,减少代码体积!!!
- 【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存
- 【Webpack 性能优化系列(3) - oneOf】
- 【Webpack 性能优化系列(2) - source-map】
- 【Webpack 性能优化系列(1) - HMR 热模块替换】
- 【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理,如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel!!!
- 【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源?devServer是什么,如何配置?
- 【Webpack 简介及五个核心概念】
多进程打包
通过thread-loader
开启多进程打包
npm install --save-dev thread-loader
使用时,需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。
注意:
请仅在耗时的操作中使用此 loader!因为每个 worker 都是一个独立的 node.js 进程,其开销大约为 600ms 左右。
我们一般给bable
用thread-loader
,即给bable
开启多进程打包
用法:
{
test: /\.js$/,
exclude: /node_modules/,
use: [
+ /*
+ 开启多进程打包。
+ 进程启动大概为600ms,进程通信也有开销。
+ 只有工作消耗时间比较长,才需要多进程打包
+ */
+ {
+ loader: 'thread-loader',
+ options: {
+ // 产生的 worker 的数量,默认是 (cpu 核心数 - 1)
+ workers: 2 // 进程2个
+ }
+ },
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 开启babel缓存
// 第二次构建时,会读取之前的缓存
cacheDirectory: true
}
}
]
},
构建项目:
可以看到此次构建用了5.4s
我们看一下没有启用多进程打包是什么情况:
正常构建项目时间4.1s,可以看到我们开启多进程打包后构建的更慢了,主要原因是测试的几乎是一个空项目,js代码非常少,如果我们对一个正常的项目使用多进程打包,就可以看到正面的增益效果了。
对于thread-loader
多进程打包,用的好的时候可以极大的提升我们的打包速度,用的差的时候,就会导致打包速度更慢
结尾
我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 👍 支持,您的 点 赞 👍 支持是我进行创作和分享的动力!
如果有问题可以留言评论或者私信我,我都会一一解答~笔芯🤞
参考
- https://webpack.docschina.org/loaders/thread-loader/
- https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver