vite 插件与生产构建
03-vite2026/11/14
vite 的插件体系是 Rollup 钩子的超集，理解钩子顺序与生效范围，才能让插件只在构建期、按正确时机介入。
本地 vite dev 里 console.log 正常，vite build 后产物还留着几十处调试日志；或配完 manualChunks 后报警告 Generated an empty chunk: "vendor"。答案都在钩子与 Rollup 输出配置里。
一、Vite 插件与 Rollup 插件的关系
Vite 插件对象是「Rollup 插件 + Vite 特有钩子 + 两个元字段」。
| 类别 | 钩子 |
|---|---|
| Rollup 构建 | options、buildStart、resolveId、load、transform、buildEnd |
| Rollup 输出 | renderChunk、generateBundle、writeBundle、closeBundle |
| Vite 特有 | config、configResolved、configureServer、transformIndexHtml |
| 元字段 | enforce、apply |
Rollup 插件基本能直接用，依赖 this.parse、emitFile 等上下文的插件偶尔要限定在 build 阶段。
二、钩子执行顺序
config → configResolved → configureServer(仅 dev) → options → buildStart
→ resolveId → load → transform → moduleParsed → buildEnd
→ outputOptions → renderChunk → generateBundle → writeBundle → closeBundle
同一钩子内的顺序由 enforce 决定：
alias → enforce:'pre' 的用户插件 → vite 核心插件 → 普通用户插件 → vite build 插件 → enforce:'post'
apply 限定环境：apply: 'serve' 只在 dev server 生效，apply: 'build' 只在打包生效，也可传函数按 command 判断。
三、生产构建去掉 console.log
export default (): Plugin => ({
name: 'strip-console',
apply: 'build', // 开发态保留，保证本地能调试
enforce: 'post', // 在 TS/JSX 转换之后，语法已降级
transform(code, id) {
if (!/\.[jt]sx?$/.test(id)) return;
const out = code.replace(/^[ \t]*console\.\w+\([^;\n]*\);?[ \t]*$/gm, '');
return out === code ? undefined : { code: out, map: null };
},
});
map: null 会让该模块 sourcemap 断掉，线上定位失真；要保留就接 magic-string 生成 map。
为什么不用 define
写成 define: { 'console.log': '(() => {})' } 有三个问题：