0%

多进程并行压缩代码

发表于 更新于 分类于 ， ， Valine：

多进程/多实例：并行压缩

使用 parallel-uglify-plugin 插件

  • 在通过 new ParallelUglifyPlugin() 实列化时，支持以下参数配置：
    • test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/.
    • include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
    • exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
    • cacheDir: 缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，cacheDir 用于配置缓存存放的目录路径。默认不会缓存，想开启缓存请设置一个目录路径。
    • workerCount：开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。
    • sourceMap：是否为压缩后的代码生成对应的Source Map, 默认不生成，开启后耗时会大大增加，一般不会将压缩后的代码的
    • sourceMap发送给网站用户的浏览器。
    • uglifyJS：用于压缩 ES5 代码时的配置，Object 类型，直接透传给 UglifyJS 的参数。
    • uglifyES：用于压缩 ES6 代码时的配置，Object 类型，直接透传给 UglifyES 的参数。

代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
    plugins: [
        // 使用 ParallelUglifyPlugin 并行压缩输出JS代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS的参数如下：
            uglifyJS: {
                output: {
                    /*
                     是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
                     可以设置为false
                    */
                    beautify: false,
                    /*
                     是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
                    */
                    comments: false
                },
                compress: {
                    /*
                     是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
                     不大的警告
                    */
                    warnings: false,

                    /*
                     是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
                    */
                    drop_console: true,

                    /*
                     是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
                     转换，为了达到更好的压缩效果，可以设置为false
                    */
                    collapse_vars: true,

                    /*
                     是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
                     var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
                    */
                    reduce_vars: true
                }
            }
        }),
    ]
}

uglifyjs-webpack-plugin 开启 parallel 参数

  • 不支持ES6语法

  • 代码演示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    module.exports = {
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    parallel: true,//开启多进程
                }),
            ],
        },
    };

terser-webpack-plugin 开启 parallel 参数

  • 代码演示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const TerserPlugin = require('terser-webpack-plugin');
    module.exports = {
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                }),
            ],
        },
    };

参考

-------------本文结束感谢您的阅读-------------