概述
多进程的打包方式可以有效提高打包速度,这其实跟 CPU 执行任务的方式有关系。我们可以简单说说为什么多进程打包会比较快:CPU 在某一个时间点只能处理一件事情(在这里我们粗暴的认为就是运行某个进程),假如说现在总共运行着 100 个进程,那么1个打包进程被执行到的概率就是1%,但是如果我们有 5 个进程是执行打包的,那么打包进程被运行到的概率就是 5%!说白了就是人多好办事!
方案细节
第一步:安装 thread-loader
npm i thread-loader -D
第二步:使用 thread-loader
因为它是一个 loader,所以它跟一般的 loader 使用方法是一样的。具体使用方式如下:
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
...
}
]
}
有些小伙伴使用 thread-loader 以后,发现打包时间不但没有变短而且变长了! 这又是怎么回事呢?因为启动多进程是需要耗费额外的时间的,大概是600ms,而且进程间需要通信以同步打包的进度,所以多进程打包比较适合在原本打包时间比较长的场景下使用。对于本来打包时间就很短的场景来说,使用多进程反而是得不偿失!在使用多进程打包时,我们一般会把它和 babel-loader 一起使用,因为一般来说 babel-loader 编译js代码的过程是比较耗时的!
注意:thread-loader 一定要放在 babel-loader 前面。根据 loader 的执行顺序,thread-loader是其实后执行的,这个顺序不能变!
结语
上面提到我们一般会把 thread-loader 跟 babel-loader 一起使用,当然我们也可以跟其他 loader 一起使用。总的来说,我们需要充分考虑自己的项目场景,有选择的去使用 thread-loader,这样才能事半功倍。