弊端

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

即使不打开控制台，浏览器依旧会缓存之前的日志输出 日志输出对性能的影响几乎可以忽略不计，因为这些日志不会被实时渲染到界面上

• 2. 暴露敏感信息（安全风险） 可能会 泄露 API 接口、Token、用户数据 等敏感信息，容易被恶意利用。
• 3. 干扰调试（影响开发者体验） 生产环境日志过多，可能会 掩盖真正的错误信息，增加调试难度。 开发者可能会误以为某些 console.log 是 预期行为，而忽略真正的 Bug。
• 4. 增加代码体积（影响加载速度） 即使 console.log 本身很小，但 大量日志 会增加打包后的文件体积，影响 首屏加载速度。

移除生产环境的 console.log

• 1. 使用 Babel 插件

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 插件

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

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

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 插件兼容性问题
• 需要额外配置