Webpack 打包性能优化之多进程

概述

---

多进程的打包方式可以有效提高打包速度，这其实跟 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，这样才能事半功倍。