探索Vite打包的奥秘：console.log剔除，原来不止一种方法！作者开发新项目时，急需找个可以去除console.

作者开发新项目时，急需找个可以去除console.log的插件，百度一搜发现还挺多

tester 插件

介绍：
Terser 是 JavaScript 代码的行业标准压缩器。
它删除注释，使变量名更小，并删除空格。
可读和可维护的代码模式被更小的代码所取代。
一些变量引用和函数调用可以内联到它们使用的地方。

npm add -D terser

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode, command }) => ({
  build: { 
    minify: "terser", 
    terserOptions: { 
      compress: { 
        drop_console: command === "build" && loadEnv(mode, __dirname).VITE_API_ENV === "prod", 
        drop_debugger: command === "build" && loadEnv(mode, __dirname).VITE_API_ENV === "prod" 
      } 
    } 
  },
  plugins: [vue()]
}))

注意：默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。Benchmarks

思考：这样做会导致打包效率会降低，官方也不是很推荐

vite-plugin-remove-console 插件

介绍
该插件就是为了console而生可配置，自由度较高目前支持剔除文件格式 .js、.ts、.jsx、.tsx、.vue、.svelte

npm install vite-plugin-remove-console -D

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import removeConsole from "vite-plugin-remove-console";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), removeConsole()]
});

思考：如果有log需求的话，使用这个最好，可以支持那些页面无需剔除日志

esbuild（没错！你没看错！它本身也是支持的）

介绍
web 构建工具

无需缓存的极速

内置JavaScript、CSS、TypeScript和JSX

用于 CLI、JS 和 Go 的简单API

捆绑 ESM 和 CommonJS 模块

摇树、缩小和源地图

本地服务器、监视模式和插件

无需下载其他插件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
      drop: ["console", "debugger"],
    },
});

思考：没有必要需求，就是简单的使用，在生产环境全部去除日志和debuger

总结

tester:如果是项目中硬性要求必须使用tester，那么使用他的相关方法是可以，否则不推荐
vite-plugin-remove-console：如果项目中有些页面或者组件需要必须显示log日志，可高度配置，该插件其实还是可以的
esbuild：如果你并没有什么硬性需求，就是为了生产环境不要日志，其实使用官方的配置即可