webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍

勇敢*牛牛2024-04-30 14:39

`HappyPack`

由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力

HappyPack 插件就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度！

线程和进程都可用于实现并发，一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线。

安装

sql 复制代码

yarn add happypack --dev
or
npm install --save-dev happypack

vue.config.js 引入

javascript 复制代码

const path = require('path')
const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
// 开启多线程构建插件(若项目为webpack5构建可以不启用此配置)
const happypack = new HappyPack({
  id: 'happybabel',
  loaders: ['babel-loader'],
  threadPool: happyThreadPool
})
module.exports =  {
 *********其他配置
  configureWebpack:config => {
      return {
        plugins: [
          happypack
        ]
      };
  },
  ********其他配置
}

这样 Happypack 的使用就配置完了，运行或者build项目，可以看到控制台打印如下提示：

javascript 复制代码

Building for production...Happy[happybabel]: Version: 5.0.1. Threads: 8 (shared pool)
Building for production...Happy[happybabel]: All set; signaling webpack to proceed.

说明配置生效了。

不同webpack版本下使用建议

webpack4及以上已经融合了多线程机制 ，因此happypack的作用不是很明显。如果你使用的版本是<4，那么还是可以继续使用HappyPack。在webpack4中有个thread-loader搭配使用，配置起来更简单，两种方式都可以试一下看看那种方案对你来说最优。