vue-cli中terser-webpack-plugin应用实战

本文主要是介绍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, // 删除debuggerdrop_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 = 4args[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 = 4args[0].terserOptions.compress.warnings = trueargs[0].terserOptions.compress.drop_debugger = trueargs[0].terserOptions.compress.drop_console = truereturn args})
}