使用 happypack 提升 Webpack 项目构建速度

本文简单介绍了 Happypack 的简单使用，不了解的同学可以进来看一看。也许会有所帮助。

Happypack 作用

在使用 Webpack 对项目进行构建时，会对大量文件进行解析和处理。当文件数量变多之后，Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的任务要一个一个进行操作。

而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度

由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。

本文项目代码地址：webpack-happypack-demo

欢迎 Star！

Happypack 的使用

Happypack 只是作用在 loader 上，使用多个进程同时对文件进行编译。

安装

$ npm install happypack --save-dev 

使用（三步操作即可完成）

一、安装完成之后引入 HappyPack

webpack.config.js

const HappyPack = require('happypack'); module.exports = { 
      ... } 

二、将常用的 loader 替换为 happypack/loader

webpack.config.js

const HappyPack = require('happypack'); module.exports = { 
      ... module: { 
      rules: [ test: /\.js$/, // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件 use: ['happypack/loader?id=babel'], // 排除 node_modules 目录下的文件 exclude: /node_modules/ ] } } 

三、创建 HappyPack 插件

webpack.config.js

const HappyPack = require('happypack'); module.exports = { 
      ... module: { 
      rules: [ test: /\.js$/, // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件 use: ['happypack/loader?id=babel'], // 排除 node_modules 目录下的文件 exclude: /node_modules/ ] }, plugins: [ ..., new HappyPack({ 
      /* * 必须配置 */ // id 标识符，要和 rules 中指定的 id 对应起来 id: 'babel', // 需要使用的 loader，用法和 rules 中 Loader 配置一样 // 可以直接是字符串，也可以是对象形式 loaders: ['babel-loader?cacheDirectory'] }) ] } 

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

Happy[babel]: Version: 5.0.1. Threads: 3 Happy[babel]: All set; signaling webpack to proceed. 

说明配置生效了。

Happypack 示例

使用单个 loader 时

上面的使用中就是单个 loader 时的配置，这里再写一次

exports.module = { 
      rules: [ { 
      test: /.js$/, use: 'happypack/loader?id=babel' } ] }; exports.plugins = [ new HappyPack({ 
      id: 'babel', loaders: [ 'babel-loader?cacheDirectory' ] }); ]; 

使用多个 loader 时

exports.module = { 
      rules: [ { 
      test: /\.(css|less)$/, use: 'happypack/loader?id=styles' }, ] }; exports.plugins = [ new HappyPack({ 
      id: 'styles', loaders: [ 'style-loader', 'css-loader', 'less-loader' ] }); ]; 

Happypack 配置项

• id: String类型，对于 happypack 来说唯一的 id 标识，用来关联 module.rules 中的 happypack/loader
• loaders: Array类型，设置各种 loader 配置，与 module.rules 中 loader 的配置用法一样

// 无配置时，可直接使用字符串形式 new HappyPack({ 
      id: 'babel', loaders: ['babel-loader?cacheDirectory'] }) // 有配置项时，可以使用对象形式 new HappyPack({ 
      id: 'babel', loaders: [ { 
      loader: 'babel-loader', options: { 
      cacheDirectory: true } } ] }) 

• threads: Number类型，指示对应 loader 编译源文件时同时使用的进程数，默认是 3
• threadPool: HappyThreadPool对象，代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多

// 创建一个 HappyThreadPool，作为所有 loader 共用的线程池 const happyThreadPool = HappyPack.ThreadPool({ 
      size: 5 }); ... new HappyPack({ 
      id: 'babel', loaders: [ { 
      loader: 'babel-loader', options: { 
      cacheDirectory: true } } ], threadPool: happyThreadPool }) 

• verbose: 是否允许 happypack 输出日志，默认是 true
• verboseWhenProfiling: 是否允许 happypack 在运行 webpack --profile 时输出日志，默认是 false
• debug: 是否允许 happypack 打印 log 分析信息，默认是 false

个人总结

个人的一点小总结，不足以作为参考依据

• 在测试 Demo 或者小型项目中，使用 happypack 对项目构建速度的提升不明显，甚至会增加项目的构建速度
• 在比较复杂的大中型项目中，使用 happypack 才能看到比较明显的构建速度提升
• 因此，在使用 happypack 时请根据具体情况进行选择，如果反而延长了项目的构建速度，就没有必要使用 happypack

本文 Demo 地址

本文项目代码地址：webpack-happypack-demo

欢迎 Star！