构建复盘记录怎样指导下一次修改构建优化容易在后续需求中反弹因为结论只留在文档里没有进入构建和评审流程。复盘应明确测量口径、依赖变化与可执行规则再由 CI 持续反馈。1. 为什么构建体积会反弹大型前端项目在经历了首轮 Vite 优化后成果迅速反弹的根本原因有三个缺乏构建预算 (Bundle Budget) 硬卡点项目里没有在 CI 中挂载体积监控机制开发者哪怕提交了一个引入 1MB 冗余依赖的 PR打包脚本依然默默 Pass 通过。复盘只有口头约定没有沉淀为 Vite 配置文件策略复盘会上大家一致同意“按需引入 Element Plus 或 Moment”但配置文件里的 RollupmanualChunks策略却没有跟进更新。缺少打包可视化归因工程师只看到总产物变大了但根本不知道是哪个子模块或者第三方 node_modules 库突然膨胀了。复盘的目标是把结论转化为配置、检查与可追溯的例外记录。2. Vite 构建治理与可视化闭环架构可按“分析、策略、CI 检查、反馈”建立闭环。该流程可以及时发现产物变化但阈值仍要结合路由、压缩方式和缓存策略解释。3. Vite 体积检查与拆包策略示例下面的插件在generateBundle阶段比较未压缩 JavaScript chunk 的大小。它适合做相对变化的守卫若预算面向网络传输还应分别统计 gzip 或 Brotli 后的资源并包含 CSS 和静态资源。import { Plugin } from vite; import { OutputChunk } from rollup; export interface BundleBudgetConfig { maxChunkSizeKb: number; maxTotalSizeKb: number; warningThresholdRatio?: number; } export function vitePluginBundleGuard(config: BundleBudgetConfig): Plugin { const maxChunkBytes config.maxChunkSizeKb * 1024; const maxTotalBytes config.maxTotalSizeKb * 1024; const warningRatio config.warningThresholdRatio || 0.8; return { name: vite-plugin-bundle-guard, apply: build, // 仅在构建生产包时生效 generateBundle(_, bundle) { let totalBytes 0; const oversizedChunks: Array{ fileName: string; sizeKb: string } []; const warningChunks: Array{ fileName: string; sizeKb: string } []; for (const [fileName, fileMeta] of Object.entries(bundle)) { if (fileMeta.type chunk) { const chunk fileMeta as OutputChunk; const chunkSize Buffer.byteLength(chunk.code, utf-8); totalBytes chunkSize; const sizeKb (chunkSize / 1024).toFixed(2); // 硬卡点阈值判断 if (chunkSize maxChunkBytes) { oversizedChunks.push({ fileName, sizeKb }); } else if (chunkSize maxChunkBytes * warningRatio) { warningChunks.push({ fileName, sizeKb }); } } } const totalSizeKb (totalBytes / 1024).toFixed(2); console.log(\n[Vite-Bundle-Guard] 构建完成。总产物体积: ${totalSizeKb} KB / 预算上限: ${config.maxTotalSizeKb} KB); // 预警打印 if (warningChunks.length 0) { console.warn([Vite-Bundle-Guard] 警告以下 Chunk 体积已逼近预算临界值:); warningChunks.forEach(c console.warn( - ${c.fileName}: ${c.sizeKb} KB)); } // 异常爆错中断 CI 部署 if (oversizedChunks.length 0 || totalBytes maxTotalBytes) { let errorMsg \n❌ [Vite-Bundle-Guard] 打包体积超出 ADR 性能预算规范阻断合并。\n; if (oversizedChunks.length 0) { errorMsg 超大 Chunk 列表 (限制 ${config.maxChunkSizeKb} KB):\n; oversizedChunks.forEach(c (errorMsg - ${c.fileName}: ${c.sizeKb} KB\n)); } if (totalBytes maxTotalBytes) { errorMsg 总体积超限: ${totalSizeKb} KB (限制 ${config.maxTotalSizeKb} KB)\n; } // 抛出错误强制终止 Rollup / Vite 构建 this.error(errorMsg); } }, }; } /** * 生产推荐的精准 Chunk 拆分策略配置范例 (vite.config.ts) */ export const productionRollupOptions { output: { manualChunks(id: string) { // 策略 1: 将基础框架单独分包是否改善缓存需结合入口和发布策略验证。 if (id.includes(node_modules/react) || id.includes(node_modules/vue)) { return framework-vendor; } // 策略 2: 大型图表库单独拆分仅在渲染对应页面时异步加载 if (id.includes(node_modules/echarts) || id.includes(node_modules/zrender)) { return echarts-vendor; } // 策略 3: 工具类函数库切片 if (id.includes(node_modules/lodash) || id.includes(node_modules/axios)) { return utils-vendor; } } } };4. Vite 构建 ADR 模板复盘后把团队讨论的结论填充进下面的ADR 模版中保存在项目/docs/adr/003-vite-build.md中# ADR-003: Vite 大型项目 Bundle 体积控制与手动拆包策略 ## 1. 复盘背景与问题 - 填写受影响路由、构建版本、未压缩与压缩后的资源体积以及对应的 RUM 或实验室指标。 - 填写新增依赖、导入方式与为何影响首屏的证据。 ## 2. 决议与代码改动策略 - **策略 1**说明 manualChunks 的分组依据并验证不会制造循环依赖或增加关键请求。 - **策略 2**在 CI 中配置与目标路由、压缩方式匹配的预算阈值。 - **策略 3**对非首屏且可延后加载的模块评估动态导入并验证加载态和错误态。 ## 3. 验证 - 记录相同设备、网络、浏览器与样本量下的构建产物和性能指标。 - 同时记录回归风险例如请求数增加、缓存失效或异步模块加载失败。5. 结语构建治理不是一次性拆包。将测量口径、预算和例外写入仓库持续观察实际路由的资源与用户指标才能在需求变化时做出有依据的取舍。