vue项目性能优化，并且打包生产环境清除‘console.log’

直接上教程=

1、安装 terser-webpack-plugin

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

2、vue.config.js 中引入

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//生产环境是不需要sourceMap的，如下配置可以去除
//问题： vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间
//sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。
//map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
  productionSourceMap:false,//清除sourceMap（可以减小一半大小如：压缩包7M，使用后3M多）

  //   打包后禁止在控制台输出console.log
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          },
        }),
      )
    }
  },
}

记得重新执行：npm install

以上是"@vue/cli-service": “~5.0.0”,

老项目"@vue/cli-service": “~4.5.0”,需要换版本

安装

		npm install -D terser-webpack-plugin@4.2.3

在webpack4 里边确实需要 配置这个 terser-webpack-plugin 插件，在 webpack5 中已经默认配置好了（具体可以去看文档），所以，期待脚手架配置 webpack5 上线。

又得饶头了，问题来了

我使用这个版本去做打包的时候，确实可以打包成功，但是打包的时候超级卡，超级慢，无奈，我换回了上一个插件，毕竟我的需求就是想要干掉 console 。

花了一个小时才找到解决方法：

new TerserPlugin({
    cache: true,
	sourceMap: false,
	// 多进程
	parallel: true,
	terserOptions: {
	    ecma: undefined,
	    warnings: false,
		parse: {},
		compress: {
			drop_console: true,
			drop_debugger: false,
			pure_funcs: ['console.log'], // 移除console
		},
	},
}),