Webpack 打包优化之 happypack 打包优化

Webpack 是前端开发中最重要的工具之一，它能够将多个 JS、CSS 文件等打包成一个或多个 bundles，同时还支持各种不同的加载器和插件，帮助我们更高效地开发前端应用。

但是，在打包大型应用时，Webpack 的性能问题就显露出来了。如何让 Webpack 打包更快、更稳定，是前端开发者需要解决的问题之一。在这个问题上，happypack 这个插件能帮我们很大忙。

Happypack 简介

Happypack 是基于 Webpack 的多进程构建工具，可以解决 Webpack 构建速度慢的问题。它可以将 webpack 的 loader 转化成并行的子进程，来加速构建过程。

Happypack 在使用上非常简单，只需要用它替换掉原来的 loader 即可，例如：

// before
{
  test: /\.jsx?$/,
  use: 'babel-loader',
  exclude: /node_modules/,
}

// after
{
  test: /\.jsx?$/,
  use: 'happypack/loader?id=babel',
  exclude: /node_modules/,
}

new HappyPack({
  id: 'babel',
  loaders: ['babel-loader'],
})

Happypack 的优点

• 并行处理任务

  Happypack 可以将任务分成多个子进程，在多核 CPU 的系统上，处理性能比单线程 loader 快得多。同时，同时处理多个 loader，可以大大提高构建速度。

• 缓存结果

  Happypack 支持缓存结果，即缓存加载器的结果，如 babel 转码后的 js 文件，避免重复的转码操作。

• 易于使用

  Happypack 只需要用它来替换掉你原来的 loader，就能很快地解决构建慢的问题。

如何使用 Happypack

下面是使用 Happypack 插件的一些简单步骤。

1. 安装 Happypack

npm install --save-dev happypack

2. 配置 webpack

在 webpack 的配置文件中，添加下面这个插件：

const HappyPack = require('happypack');

module.exports = {
  // 其他配置项
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'happypack/loader?id=babel',
        exclude: /node_modules/,
      },
    ],
  },

  plugins: [
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader'],
    }),
  ],
};

3. Enjoy it!

现在，重新构建你的项目，你会发现构建速度大大提高了。

示例代码

以下是一个使用 Happypack 的完整示例代码：

const path = require('path');
const HappyPack = require('happypack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'happypack/loader?id=babel',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader'],
    }),
  ],
};

总结

Happypack 是一个非常有用的插件，能够大幅度提高 Webpack 的构建性能。在开发大型应用时，一定要添加 Happypack，提高项目的开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b2548cadd4f0e0ffb857d3