【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度

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