国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

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
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。