如何实现前端日志分级过滤，避免生产环境输出冗余信息？

Good“英杰提问于 2026-02-12 17:05:38 阅读 26

优化

现在在做监控优化时发现，开发阶段用了很多console.log和console.warn，但生产环境跑起来后日志量太大影响性能。尝试用process.env.NODE_ENV做条件判断包裹日志：


if (process.env.NODE_ENV !== 'production') {
  console.log('Debug:', data);
}

但有些地方忘记加判断，而且error级别的日志也需要保留。现在想统一管理日志级别，比如设置DEBUG/INFO/WARNING/ERROR，生产环境只保留ERROR。试过用winston这种库但和前端框架不太兼容，有没有轻量级方案？或者如何用原生JS实现分级过滤？

我来解答赞 4 收藏

反馈

1 条解答

诸葛沐言 Lv1

用一个简单的日志封装函数就行，根据环境变量和日志级别动态控制输出。这样既轻量又能统一管理。

const LogLevel = {

  DEBUG: 0,

  INFO: 1,

  WARN: 2,

  ERROR: 3

};



const logLevelMap = {

  development: LogLevel.DEBUG,

  production: LogLevel.ERROR

};



const currentLogLevel = logLevelMap[process.env.NODE_ENV || 'development'];



const logger = {

  debug(...args) {

    if (LogLevel.DEBUG >= currentLogLevel) {

      console.log('%cDEBUG', 'color: #999', ...args);

    }

  },

  info(...args) {

    if (LogLevel.INFO >= currentLogLevel) {

      console.log('%cINFO', 'color: #00f', ...args);

    }

  },

  warn(...args) {

    if (LogLevel.WARN >= currentLogLevel) {

      console.warn('%cWARN', 'color: #ff9800', ...args);

    }

  },

  error(...args) {

    if (LogLevel.ERROR >= currentLogLevel) {

      console.error('%cERROR', 'color: #f00', ...args);

    }

  }

};



export default logger;

然后项目里直接 import logger from './utils/logger'，该打日志就打，不用每次写 if 判断。上线自动过滤掉低级别日志，应该没问题。

2026-02-12 17:06