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

本文主要是介绍webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

`HappyPack`

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

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

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

安装

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

vue.config.js 引入

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项目，可以看到控制台打印如下提示：

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