console.log的弊端

1. 影响性能（轻微但可优化）

console.log 会占用 内存 和 CPU 资源，尤其是在循环或高频触发的地方（如 mousemove 事件）。 虽然现代浏览器优化了 console，但大量日志仍可能导致 轻微性能下降。

2. 暴露敏感信息（安全风险）

可能会 泄露 API 接口、Token、用户数据 等敏感信息，容易被恶意利用。

3. 干扰调试（影响开发者体验）

生产环境日志过多，可能会 掩盖真正的错误信息，增加调试难度。 开发者可能会误以为某些 console.log 是 预期行为，而忽略真正的 Bug。

4. 增加代码体积（影响加载速度）

即使 console.log 本身很小，但 大量日志 会增加打包后的文件体积，影响 首屏加载速度。

解决方案：移除生产环境的 console.log

1. 使用 Babel 插件

在 babel.config.js 中配置：

ini
​
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    ['@babel/plugin-proposal-optional-chaining'],
    ...process.env.NODE_ENV === 'production' ? [['transform-remove-console', { exclude: ['info', 'error', 'warn'] }]] : []
  ]
}

特点：

• 不影响源码，仅在生产环境生效，开发环境保留完整 console。
• 配置简单直接，适合快速实现基本需求。
• 依赖 Babel 插件

2. 使用 Terser 压缩时移除（Webpack/Vite 默认支持）

在 vite.config.js 或 webpack.config.js 中配置：

ini

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer("terser").tap((args) => {
      args[0].terserOptions.compress = {
        ...args[0].terserOptions.compress,
        drop_console: true,       // 移除所有 console
        pure_funcs: ["console.log"], // 只移除 console.log，保留其他
      };
      return args;
    });
  },
};

特点：

• 不影响源码，仅在生产环境生效，开发环境保留完整 console。
• 避免 Babel 插件兼容性问题
• 需要额外配置

3. 自定义 console 包装函数（按需控制）

javascript

// utils/logger.js
const logger = {
  log: (...args) => {
    if (process.env.NODE_ENV !== "production") {
      console.log("[LOG]", ...args);
    }
  },
  warn: (...args) => {
    console.warn("[WARN]", ...args);
  },
  error: (...args) => {
    console.error("[ERROR]", ...args);
  },
};

export default logger;

使用方式

arduino

import logger from "./utils/logger";

logger.log("Debug info"); // 生产环境自动不打印
logger.error("Critical error"); // 始终打印

特点：

• 可以精细控制日志，可控性强，可以自定义日志级别。
• 不影响 console.warn 和 console.error。
• 需要手动替换 console.log

作者：用户2612458340161
链接：https://juejin.cn/post/7485938326336766003
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。