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

Posted 2022-08-22 凯小默

说明

玩转 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 terser-webpack-plugin@1.3.0 --save-dev

如果使用 5.3.5

打包会报错

配置一下

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

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

我们先把 parallel 设置成 false

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