本文主要是介绍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.
说明配置生效了。
不同webpack版本下使用建议
webpack4及以上已经融合了多线程机制，因此happypack的作用不是很明显。如果你使用的版本是<4，那么还是可以继续使用HappyPack。在webpack4中有个thread-loader搭配使用，配置起来更简单，两种方式都可以试一下看看那种方案对你来说最优。
这篇关于webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
