vite 打包时压缩代码的方式有两种。

• 1、esbuild
• 2、terser

默认启动的是 esbuild 进行代码压缩。 esbuild，比 terser 快 20-40倍，压缩率只差 1%-2%。

1、esbuild 压缩模式下删除 console.log 和 debugger

• （1） 只想删除 console.log 和 debugger

import {defineConfig} from "vite";
export default defineConfig({
    esbuild:{
        pure: ['console.log'], // 删除 console.log
        drop: ['debugger'], // 删除 debugger
    }
})

• （2） 删除所有的 console 和 debugger 注意，在 vite 中 drop 的属性定义是：

const type Drop = 'console' | 'debugger';
interface CommonOptions {
 // other options
 drop?: Drop[]
}

通过上面的 drop 属性定义可以看出，如果项目中想要去除所有的 console，可以配置成：

import {defineConfig} from "vite";
export default defineConfig({
    esbuild:{
        drop: ['console,'debugger'], // 删除 所有的console 和 debugger
    }
})

2、terser 压缩模式下删除 console.log 和 debugger

vite 4.X 版本已经不集成 terser 了，所以想要使用 terser 进行代码压缩，要自行下载 terser。

npm i terser -D

• (1) 只想删除 console.log 和 debugger

import {defineConfig} from "vite";
export default defineConfig({
    build: {
        minify: 'terser', // 启用 terser 压缩
        terserOptions: {
            compress: {
                pure_funcs: ['console.log'], // 只删除 console.log
                drop_debugger: true, // 删除 debugger
                
            }
        }
    }
})

• （2） 删除所有的 console 和 debugger

import {defineConfig} from "vite";
export default defineConfig({
    build: {
        minify: 'terser', // 启用 terser 压缩
        terserOptions: {
            compress: {
                drop_console: true, // 删除所有 console
                drop_debugger: true,
                
            }
        }
    }
})