webpack优化篇（四十四）：多进程并行压缩代码

说明

玩转 webpack 学习笔记

方法一：使用 parallel-uglify-plugin 插件

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
    plugins: [
        new ParallelUglifyPlugin({
            uglifyJS: {
                output: {
                    beautify: false,
                    comments: false,
                },
                compress: {
                    warnings: false,
                    drop_console: true,
                    collapse_vars: true,
                    reduce_vars: true,
                }
            },
        }),
    ],
};

方法二：uglifyjs-webpack-plugin 开启 parallel 参数

不支持 es6 语法

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: {},
        mangle: true ,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false
      },
      parallel: true
    })
  ],
};

方法三：terser-webpack-plugin 开启 parallel 参数（推荐）

支持 es6 语法

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: 4
      })
    ],
  },
};

实战使用 terser-webpack-plugin

先安装依赖，这里使用 1.3.0 的

npm install

如果使用 5.3.5

打包会报错

配置一下

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};

我们先把 parallel 设置成 false

然后把 parallel 设置成 true，开启后速度有了一定的提升。启用多进程并行运行来缩小/最小化 JavaScript 还是很有作用的。