webpack中常用的JS压缩插件有哪些

这篇文章给大家分享的是有关webpack中常用的JS压缩插件有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

这里 讲解 三种JS 打包插件：

（1）UglifyJS

支持： babel present2015、webpack3

缺点：

它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。

优点： 老项目支持（兼容 IOS10）

使用：

npm i uglifyjs-webpack-plugin

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

【推荐学习：javascript高级教程】

（2）webpack-parallel-uglify-plugin

支持： babel7、webpack4

缺点： 老项目不支持（不兼容 IOS10）

优点：

ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。

使用：

npm i -D webpack-parallel-uglify-plugin

webpack.config.js文件

// 引入 ParallelUglifyPlugin 插件const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');module.exports = {plugins: [// 使用 ParallelUglifyPlugin 并行压缩输出JS代码new ParallelUglifyPlugin({// 传递给 UglifyJS的参数如下：uglifyJS: {output: {beautify: false,comments: false},compress: {warnings: false,drop_console: true,collapse_vars: true,reduce_vars: true}}}),]}

说明

• test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/.

• include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].

• exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].

• cacheDir: 缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，cacheDir

• 用于配置缓存存放的目录路径。默认不会缓存，想开启缓存请设置一个目录路径。

• workerCount：开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。

• sourceMap：是否为压缩后的代码生成对应的Source Map, 默认不生成，开启后耗时会大大增加，一般不会将压缩后的代码的

• sourceMap发送给网站用户的浏览器。

• uglifyJS：用于压缩 ES5 代码时的配置，Object 类型，直接透传给 UglifyJS 的参数。

• uglifyES：用于压缩 ES6 代码时的配置，Object 类型，直接透传给 UglifyES 的参数。

ParallelUglifyPlugin 实列会有以下参数配置项：

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

github地址（https://github.com/gdborton/webpack-parallel-uglify-plugin）

（3）terser-webpack-plugin

支持： babel7、webpack4

缺点： 老项目不支持（不兼容 IOS10）

优点：

• 和ParallelUglifyPlugin一样，并行处理多个子任务，效率会更加的提高。

• webpack4官方推荐，有人维护。

使用：

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地址： https://github.com/webpack-contrib/terser-webpack-plugin

感谢各位的阅读！关于“webpack中常用的JS压缩插件有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！