webpack 生产环境下禁用日志 console.log

不念不忘少年蓝@ 2022-12-30 13:55 243阅读 0赞

### 文章目录 ###

*   *  Intro
     *  两种配置方法
     *   *  \`terser-webpack-plugin\`
         *  \`uglifyjs-webpack-plugin\`
     *  相关

## Intro ##

前端开发时使用`console.xxx`等api打印了很多信息，这些信息在开发时可以帮助调试。  
但是在生产环境下应该禁用，有以下两个目的：

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

## 两种配置方法 ##

### `terser-webpack-plugin` ###

下载依赖 `npm i -D terser-webpack-plugin@^5.0.3`

生产环境条件下，新增配置项：

const TerserPlugin = require("terser-webpack-plugin");
    
    // 禁用 console 输出
    optimization: { 
      minimizer: [
        new TerserPlugin({ 
          terserOptions: { 
            compress: { 
              drop_console: true
            }
          }
        })
      ]
    },

或下面一种：

### `uglifyjs-webpack-plugin` ###

安装依赖： `npm i -D uglifyjs-webpack-plugin`

生产环境的webpack配置：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    
    // 禁用 console 输出
    optimization: { 
      minimizer: [
        new UglifyJsPlugin({ 
          uglifyOptions: { 
            compress: { 
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ["console.log"],
            },
          },
          sourceMap: false,	// config.build.productionSourceMap
          cache: true,		// 启用缓存
          parallel: true,	// 并行任务构建
        }),
      ]
    },

## 相关 ##

*  [webpack 开发环境下配置 sourceMap 方便调试][webpack _ sourceMap]

[console.log]: https://blog.csdn.net/weixin_33976072/article/details/88928143
[webpack _ sourceMap]: https://blog.csdn.net/wuyujin1997/article/details/109408918