Detailed explanation of 3 JS compression plug-ins commonly used in webpack

This article will give you a detailed introduction to three commonly used JS compression plug-ins in webpack. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Here are three types of JS packaging plug-ins:

(1) UglifyJS

Support: babel present2015, webpack3

Disadvantages:

It uses a single-threaded compression code, that is Say multiple js files need to be compressed, it needs to be compressed one by one. Therefore, packaging and compressing code in a formal environment is very slow (because compressing JS code requires first parsing the code into an AST syntax tree represented by Object abstraction, and then applying various rules to analyze and process the AST, making this process very time-consuming) .

Advantages: Old project support (compatible with IOS10)

Usage:

npm i uglifyjs-webpack- plugin

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
  ]
}

[Recommended learning: javascript advanced tutorial】

(2) webpack-parallel-uglify-plugin

Support: babel7, webpack4

##Disadvantages: Not supported by old projects (not compatible with IOS10)

Advantages:

The ParallelUglifyPlugin plug-in will open multiple sub-processes and assign the compression work of multiple files to multiple sub-processes to complete, but each sub-process will still pass UglifyJS decompresses code. It's nothing more than parallel processing that needs to be compressed. Processing multiple subtasks in parallel will increase efficiency even more.

Usage:

1、

npm i -D webpack-parallel-uglify-plugin

2、

webpack.config.jsFile

// 引入 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
}
}
}),
]
}

3. Description

• test: Use regular rules to match which files need to be compressed by ParallelUglifyPlugin. The default is /.js$ /.

• include: Use regular expressions to include files compressed by ParallelUglifyPlugin, the default is [].

• exclude: Use regular expressions to exclude files Files compressed by ParallelUglifyPlugin, the default is [].

• cacheDir: caches the compressed results. The next time the same input is encountered, the compressed results are directly obtained from the cache and returned. , cacheDir

• # is used to configure the directory path where the cache is stored. It will not be cached by default. If you want to enable caching, please set a directory path.

• workerCount: Start several child processes to perform compression concurrently. The default is the number of CPU cores of the currently running computer minus 1.

• sourceMap: Whether to generate the corresponding Source Map for the compressed code. It is not generated by default. When turned on, the time consumption will be greatly increased. Generally, the compressed code will not be

• sourceMap sent to the website user's browser.

• uglifyJS: used for configuration when compressing ES5 code, Object type, directly transparently passed to UglifyJS parameters.

• uglifyES: used for configuration when compressing ES6 code, Object type, directly transparently passed to the parameters of UglifyES.

4. ParallelUglifyPlugin actual column will have the following parameter configuration items:

new ParallelUglifyPlugin({
  uglifyJS: {},
  test: /.js$/g,
  include: [],
  exclude: [],
  cacheDir: '',
  workerCount: '',
  sourceMap: false
});

5. github address (https://github.com/gdborton/webpack-parallel- uglify-plugin)

(3) terser-webpack-plugin

Support: babel7, webpack4

##Disadvantages:

Not supported by old projects (not compatible with IOS10)

Advantages:

Like ParallelUglifyPlugin, multiple subtasks are processed in parallel, and the efficiency will be further improved.
webpack4 is officially recommended and maintained by someone.

Use:

npm install terser-webpack-plugin --save-dev

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        ecma: 5,
        warnings: false,
        parse: {},
        compress: {},
        mangle: true, // Note `mangle.properties` is `false` by default.
        module: false,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
        safari10: true
      }
    })
  ]
}

github address: https://github.com/webpack-contrib/terser-webpack-plugin

For more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of Detailed explanation of 3 JS compression plug-ins commonly used in webpack. For more information, please follow other related articles on the PHP Chinese website!