vue-cli 生产模式去除 console.log

一.参考vue-cli 如何 去除 console.log

• 去除 console 应属于 webpack 插件 的事情，所以一定是需要更改webpack 的某些插件配置的
• 查看了 别人的 blog 修改 vue.config.js 中的configureWebpack来实现 需求

1. 看 vue-cli 官网

关于 webpack 的配置， 如下两个方法可以是西安对 内部的webpack 配置进性修改

2. 找到 terser-webpack-plugin

通过别人的blog 了解到 vue-cli 使用 terser 对js 解析压缩, 当然也可以去看看源码 npm 搜索 terser 找到了 如下 地址 https://github.com/webpack-contrib/terser-webpack-plugin

3. webpak-chain api 操作

从 vue-cli 官网 跳转到 github.com/neutrinojs/… webpak-chain api 操作
确认了 terser 需要通过 opitimiztion 修改, 按照如下官网案例修改。

4. terser 官方 github 找 compress配置

terser-webpack-plugin readMe 开始就 给了地址 This plugin uses terser to minify your JavaScript.

二.两种配置方式

configureWebpack: 对象操作新增修改
module.exports = config => {
  if (process.env.NODE_ENV === "production") {
    config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
    config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
      "console.log"
    ];
  }
};

 chainWebpack: 链式操作
vue-cli-service中包含插件terser-webpack-plugin, 运行build会打进去,直接配置 
module.exports = config => {
  if (process.env.NODE_ENV === 'production') { // 去除console.log输出
     config.optimization
      .minimizer('terser')
      .tap(args => {
          Object.assign(args[0].terserOptions.compress, {
            warnings: false, //默认false
            drop_console: true,
            drop_debugger: true, //默认true
            pure_funcs: ['console.log']
          })
          return args
    })
}
};

三. 第三种去除log方式,使用babel-plugin-transform-remove-console

npm i babel-plugin-transform-remove-console -D
babel.config.js修改如下

const plugins = [];

// 去除生成环境的log日志
if (process.env.VUE_APP_ENV === "prod") {
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    ...plugins,
    // es2020 ?.
    "@babel/plugin-proposal-optional-chaining",
    // es2020 ??
    "@babel/plugin-proposal-nullish-coalescing-operator"
    /*[
      "component",
      {
        libraryName: "element-ui",
        style: false
      }
    ]*/
  ]
};