[JavaScript知识库]vue-cli中terser-webpack-plugin应用实战

说在前面

先来说一下这个插件的作用，引用官网的一句话，该插件使用 [terser](https://github.com/terser/terser) 来压缩 JavaScript。

我们项目主要用来去除生产环境中的console以及debugger等信息。

餐前小菜

值得注意的是，vue-cli在开发环境中TerserWebpackPlugin是不会生效的，所以在引入该插件时，即使我们希望只在生产环境中生效，不需要判断当前的环境。

应用初尝试

vue-cli对于TerserWebpackPlugin是有封装的，所以直接按照官网介绍的方式引入是有问题的，当然，问题不是说说而已，下面给大家对比一下不同的引入方式对于打包产生的损耗。

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
... // other code
configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          parallel: 4,
          terserOptions: {
            compress: {
              warnings: true,
              drop_debugger: true, // 删除debugger
              drop_console: true  // 删除console
            }
          }
        })
      ],
    }
}

此时运行npm run build命令，可以发现打包时间是：

究其原因，大家此时可以执行一下vue inspect > output.js命令，查看一下打包的配置文件，搜索关键字minimizer，可以发现他有两个options，我们有理由相信，这种情况下去打包，这两个插件会分别处理一遍我们的工程，为什么？

本身vue-cli会帮我们引入TerserWebpackPlugin,特定的webpack版本也会自动引入该插件，在vue.config.js中引入的TerserPlugin经过定位就是webpack引入的，所以在webpack配置中，一共new()了两次，自然也就会处理两次。

优化尝试

下面我们尝试去覆盖已有的配置，添加删除console以及debugger的代码：

// vue.config.js
chainWebpack (config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].parallel = 4
      args[0].terserOptions = {
          compress: {
              warnings: true,
              drop_console: true,
              drop_debugger: true
          }
      }
      return args
    })
}

此时去查看打包配置的文件，搜索minimizer，可以发现就只有一个options了，说明我们已经成功完成了合并，但是上面的写法好像把terserOptions属性完全覆盖了，我们看一下当前的打包时间：

不错，快了40秒左右的时间。

最佳体验

其实vue-cli给出的配置，肯定是经过优化调整的，所以不是特殊情况，就不要覆盖原有配置了，所以改成下面这种写法：

// vue.config.js
chainWebpack (config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].parallel = 4
      args[0].terserOptions.compress.warnings = true
      args[0].terserOptions.compress.drop_debugger = true
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

现在来看看打包的时间：

速度又增加了40秒左右。

说到最后

以上。