Vue打包快速去重console.log

方法一

注意：　　node版本  v6.9.0+  ； webpack版本  v4.0.0+  。

　　代码只会在生产环境(production)下有效。

安装：npm i uglifyjs-webpack-plugin

使用：在webpack.config.js文件下进行如下配置，重启生效

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 // 省略...
    mode: "production",
    optimization: {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              // 删除注释
              output:{
                comments: false
              },
              compress: {
                drop_console: true, // 删除所有调式带有console的
                drop_debugger: true,
                pure_funcs: ['console.log'] // 删除console.log
              }
            }
          })
        ]
      } 
} 

方法二

注意：

　　如果webpack版本大于5+，则不需要安装terser-webpack-plugin插件，会自带。

　　如果webpack版本还是4，则需要安装此插件4的版本。

　　该插件与上面一样，属性用法也一样，都是在生产环境生效。不同在于该插件可支持ES6语法。

安装：npm i terser-webpack-plugin@4

使用：

const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
    // 省略...
    mode: "production",
    optimization: {
     minimizer: [
           new TerserWebpackPlugin({
                terserOptions: {
                  compress: {
                    warnings: true,
                    drop_console: true,
                    drop_debugger: true,
                    pure_funcs: ['console.log', "console.table"] // 删除console
                  }
                }
            });
        ]
    }
}

方法三：

在Vue-cli项目中推荐使用的清除console插件。更多介绍：babel-plugin-transform-remove-console

安装：npm i babel-plugin-transform-remove-console --save-dev

使用：

在项目根目录babel.config.js文件下配置。该插件不区分生产环境或者开发环境，只要你配置都能生效。

module.exports = {
 plugins: [
  "transform-remove-console"
 ]
}

// 生产环境如下配置
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
 prodPlugins.push('transform-remove-console')
}
module.exports = {
 plugins: [
  ...prodPlugins
 ]
}

方法四：

直接重写console.log方法

console.log = function () {};

在VSCode编辑器使用

全局搜索项目中的console.log正则匹配，然后全部替换为空

console\.log\(.*?\)

文章源地址：https://zhuanlan.zhihu.com/p/396677874