针对 WebPack 多核利用率低的现状的优化

HappyPack

happypack 的处理思路是将原有的 webpack 对 loader 的执行过程从单一进程的形式扩展多进程模式，原本的流程保持不变，这样可以在不修改原有配置的基础上来完成对编译过程的优化，具体配置如下（以 Vue 项目为例）：

javascript

// webpack.base.conf.js
const os = require("os");
const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length > 4 ? 4 : os.cpus().length });
const happyPackPlugin = [
  new HappyPack({
    id: "happy-babel-js",
    threadPool: happyThreadPool,
    loaders: ["babel-loader?cacheDirectory=true"],
  }),
  new HappyPack({
    id: "vue",
    threadPool: happyThreadPool,
    loaders: [
      {
        loader: "vue-loader",
        options: vueLoaderConfig,
      },
    ],
  }),
];

// 省略代码...

module.exports = {
  // 省略代码...
  module: {
    rules: [
      {
        test: /\.vue$/,
        // loader: "vue-loader",
        // options: vueLoaderConfig,
        loader: "happypack/loader?id=vue",
      },
      {
        test: /\.js$/,
        // loader: "babel-loader",
        loader: "happypack/loader?id=happy-babel-js",
        include: [resolve("src")],
      },
      // 省略代码...
    ],
  },
  // 省略代码...
  plugins: [].concat(happyPackPlugin),
};

// webpack.base.conf.js
const os = require("os");
const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length > 4 ? 4 : os.cpus().length });
const happyPackPlugin = [
  new HappyPack({
    id: "happy-babel-js",
    threadPool: happyThreadPool,
    loaders: ["babel-loader?cacheDirectory=true"],
  }),
  new HappyPack({
    id: "vue",
    threadPool: happyThreadPool,
    loaders: [
      {
        loader: "vue-loader",
        options: vueLoaderConfig,
      },
    ],
  }),
];

// 省略代码...

module.exports = {
  // 省略代码...
  module: {
    rules: [
      {
        test: /\.vue$/,
        // loader: "vue-loader",
        // options: vueLoaderConfig,
        loader: "happypack/loader?id=vue",
      },
      {
        test: /\.js$/,
        // loader: "babel-loader",
        loader: "happypack/loader?id=happy-babel-js",
        include: [resolve("src")],
      },
      // 省略代码...
    ],
  },
  // 省略代码...
  plugins: [].concat(happyPackPlugin),
};

uglifyjs-webpack-plugin

目前 webpack 官方也维护了一个支持多核压缩的 UglifyJs 插件：uglifyjs-webpack-plugin。完全兼容 webpack.optimize.UglifyJsPlugin 中的配置。

使用示例：

javascript

// webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
  // 省略代码...
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
        },
      },
      sourceMap: config.build.productionSourceMap,
      parallel: os.cpus().length,
    }),
  ],
  // 省略代码...
});

// webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
  // 省略代码...
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
        },
      },
      sourceMap: config.build.productionSourceMap,
      parallel: os.cpus().length,
    }),
  ],
  // 省略代码...
});

针对 WebPack 多核利用率低的现状的优化 ​

HappyPack ​

uglifyjs-webpack-plugin ​

针对 WebPack 多核利用率低的现状的优化

HappyPack

uglifyjs-webpack-plugin