webpack多进程打包方案

安装

yarn add happypack -D

作用

• 在使用 Webpack 对项目进行构建时，会对大量文件进行解析和处理。当文件数量变多之后，Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的任务要一个一个进行操作。
• 而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度
• 由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。

特点

• JS单线程，开启多进程打包
• 提高构建速度（特别是多核CPU）
• 文件越多效果越明显

配置

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
const srcPath = path.join(__dirname, '.', 'src')
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'development') {
          config.module.rules.push({
            test: /\.js$/,
            // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
            use: ['happypack/loader?id=babel'],
            include: srcPath,
            exclude: /node_modules/
          })
          config.plugins.push(
            // happyPack 开启多进程打包  
            new HappyPack({
              // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
              id: 'babel',
              loaders: ['babel-loader?cacheDirectory'],
              // 共享进程池
              threadPool: happyThreadPool,
            })
          )
        }
      }
 }

生效

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

 

注意

1. 在小型项目中，使用 happypack 对项目构建速度的提升不明显，甚至有可能会增加项目的构建速度
2. 在大中型项目中（复杂），使用 happypack 有比较明显的构建速度提升
3. 请根据具体情况进行选择是否使用，可以进行测试比较后再选择是否使用