Vite生产环境调试神器：手把手教你用WebLogger保留console.log（附localStorage开关技巧）

Vite生产环境调试实战：打造可动态控制的WebLogger解决方案

当线上应用出现难以复现的Bug时，前端开发者常常需要在生产环境进行调试。然而Vite默认会在构建时移除所有console.log输出，这给问题排查带来了巨大挑战。本文将分享一套完整的解决方案，不仅保留生产环境的日志输出能力，还能通过localStorage实现动态开关控制。

1. 理解Vite的日志过滤机制

Vite作为新一代前端构建工具，默认会在生产构建时移除console语句，这是出于性能和安全的最佳实践。但这一特性往往让开发者陷入两难：既需要保持生产环境的整洁，又要在必要时获取调试信息。

通过分析Vite的构建流程，我们发现其日志过滤主要通过两种方式实现：

• ESBuild压缩：Vite默认使用ESBuild进行代码压缩，可通过pure配置移除特定函数调用
• Terser压缩：作为备选方案，Terser提供了更细粒度的控制选项

// ESBuild配置示例
export default defineConfig({
  esbuild: {
    pure: ['console.log'],
    drop: ['debugger']
  }
})

提示：Vite 4.x+版本默认不再内置Terser，如需使用需要手动安装terser依赖

2. WebLogger核心实现方案

2.1 基础封装：绕过构建过滤

通过解构console对象并重新绑定上下文，我们可以创建不会被构建工具过滤的日志方法：

const { log, error, warn } = console

export const WebLogger