Webpack 插件扫盲系列（三） webpack.TerserWebpackPlugin、webpack.UglifyjsWebpackPlugin和ParallelUglifyPlugin

一、背景

这三种插件都是Webpack常用的压缩代码插件。这三者有什么不同？使用的时候有什么注意点？接下来我们一起探究一下。

一、webpack.UglifyjsWebpackPlugin

这个是Webpack官方维护，用Uglifyjs进行代码压缩的插件。它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。优点是支持老项目，对于维护比较老的项目，是较优的选择。

使用：
npm i uglifyjs-webpack-plugin

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

API连接：https://webpack.docschina.org/plugins/uglifyjs-webpack-plugin/

二、ParallelUglifyPlugin

ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。但是这个插件并不是由Webpack官方维护，截止目前已经1年未更新，而且不支持老项目。

使用：
1、npm i -D webpack-parallel-uglify-plugin

2、webpack.config.js文件

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin