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

[yuanyuanbyte]

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

多进程打包

通过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多进程打包，用的好的时候可以极大的提升我们的打包速度，用的差的时候，就会导致打包速度更慢

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。