Vite 5构建：精准移除console.log保留其他console方法

在Vite 5项目构建过程中，开发者经常需要移除调试用的console.log语句，但又希望保留console.info等其它日志方法。本文将详细介绍三种专业解决方案。

方法一：使用terser配置

// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        pure_funcs: ['console.log'] // 只移除console.log
      }
    }
  }
})

方法二：自定义babel插件

安装必要依赖：

npm install @babel/core babel-plugin-transform-remove-console --save-dev

创建自定义插件：

// customBabelPlugin.js
module.exports = function() {
  return {
    visitor: {
      CallExpression(path) {
        if (path.node.callee.object?.name === 'console' && 
            path.node.callee.property?.name === 'log') {
          path.remove()
        }
      }
    }
  }
}

方法三：使用vite-plugin-remove-console

安装专用插件：

npm install vite-plugin-remove-console --save-dev

配置插件：

// vite.config.js
import removeConsole from 'vite-plugin-remove-console'

export default defineConfig({
  plugins: [
    removeConsole({
      includes: ['log'] // 只移除log
    })
  ]
})

最佳实践建议

• 生产环境才启用console.log移除
• 结合SourceMap调试时不影响定位问题
• 团队统一规范console使用方式

通过以上方法，您可以精准控制Vite 5构建过程中console语句的处理方式，既保持代码整洁又不丢失重要调试信息。