构建配置评审先检查缓存和产物边界构建配置的评审需要同时看模块副作用、产物结构、缓存和加载路径。导入形式或manualChunks本身不是性能结论改动后应以构建产物和真实加载数据验证。1. 代码评审细节一被忽视的 Tree-Shaking 破坏者在评审 Vite 项目代码时最危险的细节莫过于“破坏静态分析的隐性副作用Side Effects”。很多第三方库或内部 CommonUtils在模块顶层直接执行了全局副作用逻辑。当开发者在组件中哪怕只引用了库里的一小块纯函数Rollup 也会因为无法证明顶层副作用安全被迫将整个库全量打包进产物 Chunk// 代码评审中的典型反例顶层执行了隐形副作用导致 Tree-Shaking 彻底失效 import { formatDate } from ./large-utils; // 实际上 large-utils 内部包含了如下代码 // console.log(初始化全局环境); window.__MY_GLOBAL__ Date.now(); // 即使你只用了 formatDate整个 large-utils (数万行) 也会被打进 bundle只有确认整个包的模块都没有副作用时才可以声明sideEffects: false错误声明会让必需初始化代码被移除。对于有副作用的文件应使用精确路径保留。2. 代码评审细节二ManualChunks 分包策略与循环依赖毒瘤另一个必须死盯的细节是 Vite / Rollup 的manualChunks配置。不少开发者为了追求所谓的“按需分包”喜欢在manualChunks里写复杂的正则逻辑企图把node_modules里的第三方库人为拆碎。殊不知稍有不慎就会引发循环依赖Circular Dependency导致浏览器加载 Chunk 时报Cannot access xxx before initialization的运行时崩溃// vite.config.ts - 审查时必须高度警惕的 manualChunks 反模式 import { defineConfig } from vite; export default defineConfig({ build: { rollupOptions: { output: { manualChunks(id) { // 危险做法按正则粗暴切割极易引发循环依赖与小 Chunk 碎片化 if (id.includes(node_modules)) { if (id.includes(lodash)) return vendor-lodash; if (id.includes(element-plus)) return vendor-element; return vendor-common; } }, }, }, }, });好的分包策略应该是确定且收敛的。优先依赖 Vite 默认的基于动态import()的 Code Splitting 机制而不是手动用正则去切分node_modules。3. 确定性静态门禁编写 AST 自动化审查插件靠人工在 Code Review 时用眼睛看终究会有疏漏。我们编写了一个专门在 CI 阶段拦截破坏性构建代码的 Vite 静态 AST 审查工具import { Plugin } from vite; import * as ts from typescript; export function viteBuildQualityGatePlugin(): Plugin { return { name: vite-build-quality-gate-plugin, apply: build, // 仅在构建阶段生效 transform(code, id) { // 仅检查 src 目录下的源码 if (!id.includes(/src/) || id.includes(node_modules)) { return null; } const sourceFile ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true); const warnings: string[] []; function visitor(node: ts.Node) { // 1. 检查是否存在 import * as 全量导入大库的反模式 if (ts.isImportDeclaration(node)) { const importPath node.moduleSpecifier.getText(); if (importPath.includes(lodash) || importPath.includes(ramda)) { if (node.importClause?.namedBindings ts.isNamespaceImport(node.importClause.namedBindings)) { warnings.push( [PR Gate Violation] 在 ${id} 发现全量 Namespace 导入 ${importPath}必须修改为按需具名导入 ); } } } // 2. 检查是否存在未加上 ignore 注释的巨型同步 import if (ts.isCallExpression(node) node.expression.kind ts.SyntaxKind.ImportKeyword) { // 动态 import 校验 } ts.forEachChild(node, visitor); } visitor(sourceFile); if (warnings.length 0) { console.error(\n Vite 构建质量门禁拦截 ); warnings.forEach((w) console.error(w)); console.error(\n); throw new Error([Vite Quality Gate] 代码审查未通过构建被硬性阻断); } return null; }, }; }4. 评审清单把好代码评审关是 Vite 大型工程治理成本最低、效果最好的防线盯住 Import 方式禁止import * as引入工具库确保 Tree-Shaking 干净彻底。警惕 manualChunks 正则手动分包切忌写粗暴的正则防止循环依赖导致线上死锁。工具代替记忆把常用的构建防线编写成 CI / Vite AST 插件把隐形风险拦截在合并 PR 之前。规则应帮助团队发现风险最终仍要以产物和加载测试作为依据。