构建优化先固定样本再谈速度AI 可以协助分析 Vite 配置和打包产物但不应直接决定manualChunks策略。分包数量、缓存命中和首屏性能之间没有固定的单向关系HTTP/2/3、CDN、路由与依赖结构都会影响结果。因此任何配置建议都应在代表性项目和固定测量条件下验证。本文整理可用于评估的构建、产物和开发体验指标。Vite 构建 Agent 评估体系与测量管线只看vite build总耗时无法说明配置是否适合项目。真正的 Vite 构建链路指标包含三个关键维度HMR 响应延迟Hot Module Replacement Latency修改单个文件到浏览器完成 DOM 局部更新的毫秒数。Module Graph 碎片度Chunk Fragmentation Score产物中 5KB 的微型 Chunk 数量占比。依赖预构建命中率OptimizeDeps Hit Ratenode_modules缓存失效的频次。智能构建 Agent 的每次调优都必须在这个可复现的自动化测量管线里跑一遍分层校验生产级 Vite 自动化 HMR 与 Bundle 测量脚本实现下面是我们研发的 Vite 构建测量工具代码。采用 Node.js Vite JS API 与 TypeScript 编写可以在 CI 流程中对任何 Vite 配置变更进行无偏见的基准测量。import { createServer, build, ViteDevServer } from vite; import path from path; import fs from fs; import { performance } from perf_hooks; // 1. 定义测量指标数据结构 export interface ViteBenchmarkResult { hmrLatencyMs: number; totalChunksCount: number; tinyChunksCount: number; // 5KB 的碎片化 chunk 数量 totalBundleSizeBytes: number; } export class VitePerformanceMeasurer { private rootDir: string; constructor(rootDir: string) { this.rootDir rootDir; } /** * 测量 Dev Server 下的 HMR 触发耗时 */ public async measureHMRLatency(targetFilePath: string): Promisenumber { const server: ViteDevServer await createServer({ root: this.rootDir, server: { port: 9999, hmr: true }, logLevel: silent, }); await server.listen(); console.log([Benchmark] Vite Dev Server 启动成功准备测试 HMR 吞吐...); const absolutePath path.resolve(this.rootDir, targetFilePath); const originalContent fs.readFileSync(absolutePath, utf-8); try { const startTime performance.now(); // 步骤 A: 构造一次真实的源码修改触发 HMR const touchedContent ${originalContent}\n// HMR Benchmark Touch: ${Date.now()}; fs.writeFileSync(absolutePath, touchedContent, utf-8); // 步骤 B: 监听 Vite Module Graph 节点失效事件 await new Promisevoid((resolve, reject) { const timeoutId setTimeout(() reject(new Error(HMR invalidation timed out)), 10_000); const checkInvalidated setInterval(() { const mod server.moduleGraph.getModuleById(absolutePath); if (mod mod.lastHMRTimestamp startTime) { clearInterval(checkInvalidated); clearTimeout(timeoutId); resolve(); } }, 5); }); const hmrLatency performance.now() - startTime; console.log([Benchmark] HMR 响应耗时: ${hmrLatency.toFixed(2)}ms); return hmrLatency; } finally { // 还原测试源码 fs.writeFileSync(absolutePath, originalContent, utf-8); await server.close(); } } /** * 分析 Build 产物的 Chunk 碎片度与体积分布 */ public async analyzeBundleStructure(): PromiseOmitViteBenchmarkResult, hmrLatencyMs { console.log([Benchmark] 开始运行 Vite Production Build 分析...); const outputDir path.resolve(this.rootDir, dist-benchmark); // 执行打包 await build({ root: this.rootDir, build: { outDir: outputDir, write: true, minify: false, // 便于精确衡量原始分包结构 }, logLevel: silent, }); const files fs.readdirSync(path.resolve(outputDir, assets)); let totalChunksCount 0; let tinyChunksCount 0; let totalBundleSizeBytes 0; for (const file of files) { if (file.endsWith(.js)) { totalChunksCount; const filePath path.resolve(outputDir, assets, file); const stats fs.statSync(filePath); totalBundleSizeBytes stats.size; // 小于 5KB 定义为超小碎片 Chunk if (stats.size 5 * 1024) { tinyChunksCount; } } } // 清理测试产物 fs.rmSync(outputDir, { recursive: true, force: true }); return { totalChunksCount, tinyChunksCount, totalBundleSizeBytes, }; } }审核 AI 给出的分包建议下面的规则会按顶层包名拆分第三方依赖。它可作为实验起点但不是通用推荐配置小依赖、强关联依赖和共享依赖都可能因此被拆得过细。// Agent 推荐的 Vite 配置片段 manualChunks(id) { if (id.includes(node_modules)) { return id.toString().split(node_modules/)[1].split(/)[0].toString(); } }评估时除 chunk 数量和体积分布外还应在目标网络与缓存条件下比较关键路由的加载瀑布、资源优先级和 Web Vitals。这里的脚本只测到开发服务器的模块失效不等于浏览器完成 HMR 和 DOM 更新端到端 HMR 体验需要用真实浏览器测试补充。构建建议的三个门槛基准项目应包含实际依赖、动态import()、样式处理和典型路由。微型 chunk 占比可以作为告警信号但阈值应由项目网络条件与加载策略决定不能照搬固定百分比。CI 可记录构建与产物回归浏览器侧 HMR 和关键路由加载则应在端到端环境定期验证。
