TypeScript 中 Vite 怎么在打包时去除所有的调试日志-js教程-PHP中文网

vite通过esbuild或terser在构建阶段自动剥离console和debugger等调试代码。推荐使用esbuild的drop:['console','debugger']配置，开箱即用且构建更快；若需精细控制，可切换terser并配置drop_console/drop_debugger。

typescript 中 vite 怎么在打包时去除所有的调试日志

在 TypeScript 的 Vite 项目中，打包时去除所有调试日志（如 console.log、console.error、debugger）是标准的生产环境优化手段。Vite 本身不直接“删除”日志，而是通过底层压缩器（esbuild 或 terser）在构建阶段自动剥离这些副作用代码。关键在于正确配置压缩行为，而非手动搜索替换。

用 esbuild 快速移除（推荐默认方案）

Vite 4+ 默认使用 esbuild 进行生产构建压缩，它支持原生的 drop 选项，轻量且极速。只需在 vite.config.ts 中添加：

esbuild: { drop: ['console', 'debugger'] }
该配置对所有 console.* 方法（log/warn/error/table 等）一并移除
无需额外安装依赖，开箱即用
适用于绝大多数 TS + Vue/React 项目，构建速度优势明显

用 terser 实现更精细控制

若需更细粒度策略（比如只删 console.log，保留 console.warn），或团队已有 terser 经验，可切换为 terser：

php版微信js-sdk支付接口类

下载

先安装：npm install -D terser
配置 build.minify = 'terser' 并启用压缩选项：
terserOptions: { compress: { drop_console: true, drop_debugger: true } }
注意：drop_console: true 会移除全部 console.* 调用；若仅想删特定方法，可用 pure_funcs: ['console.log']

按环境动态启用（TypeScript 安全写法）

避免开发时误删日志，建议结合环境变量控制。在 vite.config.ts 中利用 mode 参数判断：

export default defineConfig(({ mode }) => {
const isProd = mode === 'production';
return { build: { esbuild: isProd ? { drop: ['console', 'debugger'] } : undefined } }
TypeScript 类型推导能确保配置对象结构安全，IDE 也会提示错误