console.log的弊端
1. 影響性能（輕微但可優(yōu)化）
console.log 會(huì)占用 內(nèi)存 和 CPU 資源，尤其是在循環(huán)或高頻觸發(fā)的地方（如 mousemove 事件）。
雖然現(xiàn)代瀏覽器優(yōu)化了 console，但大量日志仍可能導(dǎo)致 輕微性能下降。
2. 暴露敏感信息（安全風(fēng)險(xiǎn)）
可能會(huì) 泄露 API 接口、Token、用戶數(shù)據(jù) 等敏感信息，容易被惡意利用。
3. 干擾調(diào)試（影響開發(fā)者體驗(yàn)）
生產(chǎn)環(huán)境日志過多，可能會(huì) 掩蓋真正的錯(cuò)誤信息，增加調(diào)試難度。
開發(fā)者可能會(huì)誤以為某些 console.log 是 預(yù)期行為，而忽略真正的 Bug。
4. 增加代碼體積（影響加載速度）
即使 console.log 本身很小，但 大量日志 會(huì)增加打包后的文件體積，影響 首屏加載速度。
解決方案：移除生產(chǎn)環(huán)境的 console.log
1. 使用 Babel 插件
在 babel.config.js 中配置：
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'] }]] : []
]
}
特點(diǎn)：
- 不影響源碼，僅在生產(chǎn)環(huán)境生效，開發(fā)環(huán)境保留完整
console。 - 配置簡(jiǎn)單直接，適合快速實(shí)現(xiàn)基本需求。
- 依賴 Babel 插件
2. 使用 Terser 壓縮時(shí)移除（Webpack/Vite 默認(rèn)支持）
在 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
})
},
}
特點(diǎn)：
- 不影響源碼，僅在生產(chǎn)環(huán)境生效，開發(fā)環(huán)境保留完整
console。 - 避免 Babel 插件兼容性問題
- 需要額外配置
3. 自定義 console 包裝函數(shù)（按需控制）
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;
使用方式
import logger from "./utils/logger";
logger.log("Debug info");
logger.error("Critical error");
特點(diǎn)：
- 可以精細(xì)控制日志，可控性強(qiáng)，可以自定義日志級(jí)別。
- 不影響
console.warn 和 console.error。 - 需要手動(dòng)替換
console.log
400 186 1886
