前端开发时使用console.xxx等api打印了很多信息，这些信息在开发时可以帮助调试。

但是在生产环境下应该禁用，有以下两个目的：

1.    减少性能影响：控制台打印大量数据会影响浏览器性能，见console.log和垃圾回收，未测试，但影响一定会有。
2.    避免过多信息泄露：主要针对非普通用户而言

 

 

1. terser-webpack-plugin

安装

yarn add -D terser-webpack-plugin

 

配置webpack.config.js

const path = require('path');
TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // entry: ....,
  // output: ....,
  plugins: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ]
}

 

2. uglifyjs-webpack-plugin

安装

 yarn add -D uglifyjs-webpack-plugin

webpack.config.js

const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  // entry: ...,
  // output: ...,
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_debugger: true,
          drop_console: true,
          pure_funcs: ["console.log"],
        },
      },
      sourceMap: false,	// config.build.productionSourceMap
      cache: true,		// 启用缓存
      parallel: true,	// 并行任务构建
    }),
  ]
}