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

深藏阁楼爱情的钟 2022-09-10 00:12 169阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验][Webpack _8_ - PWA]
 *  [【Webpack 性能优化系列(7) - 懒加载和预加载】][Webpack _7_ -]
 *  [【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载][Webpack _6_ - code splitting _ bundle]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存][Webpack _4_ - _ _bable]
 *  [【Webpack 性能优化系列(3) - oneOf】][Webpack _3_ - oneOf]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][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
            }
          }
        ]
      },

构建项目：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]  
可以看到此次构建用了5.4s

我们看一下没有启用多进程打包是什么情况：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
正常构建项目时间4.1s，可以看到我们开启多进程打包后构建的更慢了，主要原因是测试的几乎是一个空项目，js代码非常少，如果我们对一个正常的项目使用多进程打包，就可以看到正面的增益效果了。

**对于`thread-loader`多进程打包，用的好的时候可以极大的提升我们的打包速度，用的差的时候，就会导致打包速度更慢**

# 参考 #

*  https://webpack.docschina.org/loaders/thread-loader/
 *  https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm\_id\_from=pageDriver

[Webpack _8_ - PWA]: https://blog.csdn.net/weixin_45844049/article/details/120063411
[Webpack _7_ -]: https://blog.csdn.net/weixin_45844049/article/details/120048999
[Webpack _6_ - code splitting _ bundle]: https://blog.csdn.net/weixin_45844049/article/details/120044485
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _4_ - _ _bable]: https://blog.csdn.net/weixin_45844049/article/details/120022585
[Webpack _3_ - oneOf]: https://blog.csdn.net/weixin_45844049/article/details/120008581
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a6d2dbae9aee47ff9c72a3eaa61b9dab.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/c7c3e57952c14dadb998a82376b431c8.png