[JavaScript知识库]webpack优化系列六：vue项目配置 terser-webpack-plugin 压缩 JS，去除console

代码打包后，开发中写的很多打印信息或者断点，都会带上去，即影响美观，又影响性能，而生产大多不需要，故而需去除；
插件使用 terser 来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。
通过查阅后，经测试此方法可行，故记录，以便后续查看。

网站推荐：https://www.npmjs.com/package/terser-webpack-plugin

webpack其他相关给、推荐
一：webpack优化相关
1：webpack优化系列一：webpack不同环境打包配置
2：webpack优化系列二：Vue配置compression-webpack-plugin实现Gzip压缩
3：webpack优化系列三：vue子目录路径更改—publicPath
4：webpack优化系列四：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk
5：webpack优化系列五：vue项目配置 webpack-obfuscator 进行代码加密混淆

安装依赖

注意：版本需正确，否则报错

常见webpack安装版本

webpack4的安装方式

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

webpack5的安装方式

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

查看webpack应安装版本

查看网站

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

查看方式

terser-webpack-plugin git官网的tags的package.json上进行详细查看；

文件配置

配置项webpack.config.js

const TerserPlugin = require("terser-webpack-plugin")
minimizer: [
	new TerserPlugin({
		test: /\.js(\?.*)?$/i,
		parallel: true,
		extractComments: true,
		sourceMap: config.build.productionSourceMap,
		terserOptions: {
			output: {
				// 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
				beautify: false,
				// 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
				comments: false
			},
			compress: {
				// 是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用不大的警告
				warnings: false,
				// 是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
				drop_console: true,
				drop_debugger: 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,
				pure_funcs: ['console.log'] // 移除console
			}
		}
	}),
 ]

配置项vue.config.js

const TerserPlugin = require("terser-webpack-plugin")
module.exports = {
    //=>设置一些webpack配置项，用这些配置项和默认的配置项合并
    configureWebpack:{
        optimization: {
            minimizer: [
              new TerserPlugin({
                terserOptions:{
                  compress:{
                    warnings: false,
                    drop_console: true,
                    drop_debugger: true,
                    pure_funcs: ["console.log"]
                  }
                }
              })
            ],
          },
    }
}