vue/cli 4.x 打包到生产环境删除调试console（新

版本@vue\cli 4.3.1，默认设置下打包到production环境下，发现打包后的js文件内的所有console.*()方法还在里面，这个本该是默认移除的。

首先我打开了vue ui，打开inspect检查webpack配置，发现当前的minimizer已经不再是UglifyJS了，换成了Terser，它是webpack v4的默认压缩工具，也是当前性能最好的。

现在打开inspect输出的默认配置项，找到minimizer配置：

//......
 minimizer: [
      /* config.optimization.minimizer('terser') */
      new TerserPlugin(
        {
          terserOptions: {
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true
            },
            //......
          },
          //......
        }
      )
    ]
//......

compress内部的设置就是压缩配置项，打开该插件的文档，与console.*()相关的配置项为drop_console，该配置默认是false，现在只要打开它就好了。

查看了vue/cli的配置文档，发现需要在项目的vue.config.js文件内进行配置的更改，具体代码如下：

//......
// 写法一
configureWebpack: (config) => {
   // 判断为生产模式下，因为开发模式我们是想保存console的
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer.map((arg) => {
        const option = arg.options.terserOptions.compress;
        option.drop_console = true; // 打开开关
        return arg;
      });
    }
  },
// 写法2
 chainWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer("terser").tap((arg) => {
        arg[0].terserOptions.compress.drop_console = true;
        return arg;
      });
  }
}
//......

进行生产模式打包验证，发现达到效果。 开启前.png
开启后.png