Vibe Coding Bundle 与网络瀑布诊断：从入口归因到删除验证

看到初始 JavaScript 增加 80 KB，Agent 可能立刻建议 dynamic import；看到瀑布上有一条晚请求，又可能添加 preload。两种修复都可能无效：模块虽在 chunk 中却没有进入当前路由，资源已经从缓存命中，真正瓶颈是串行 API；或预加载了低优先级资源，反而和 LCP 图片争抢带宽。诊断要先证明时间花在哪个阶段，再改变加载策略。

本文承接Web 性能回归门的失败结果，不做通用前端优化列表。目标是建立从“哪个入口为何包含某模块”到“浏览器何时请求、传输并执行它”的证据链，让 Vibe Coding 建议可以被证伪。

冻结一次可复演的加载

先固定 base/head、生产构建命令、路由、身份、语言、视口、浏览器、网络与 CPU 档位、服务数据和缓存模式。冷缓存用于发现首次访问成本，暖缓存用于验证复访与 revalidation；两者分开报告，不能清缓存后声称所有用户都会这样，也不能用本机长期缓存掩盖新用户成本。

页面准备条件由可观察 UI 状态决定。记录导航类型、重定向、Service Worker 控制状态、扩展和代理，关闭会注入资源的非产品因素。第三方域名保持批准配置或使用明确替身，不能在候选提交里屏蔽、在基线里保留。

产物侧保存 route-to-chunk manifest、模块图、chunk 原始大小与实际传输编码、source map 身份和构建器版本。开发模式图不参与比较。Source map 可能暴露源码与路径，只存入受控制品，不上传公共分析站。

先回答“为什么进入 Bundle”

从回归 chunk 反向追到入口和 import 链。常见原因包括把服务端模块引入客户端边界、从 barrel 导入触发额外副作用、同一库出现多个版本、语言包一次全量加载、条件分支在构建时无法消除，以及第三方组件顶层初始化。包的 README 写着 tree-shakeable 不能代替当前产物证据。

大小要分别看原始、压缩传输和解析执行成本。字符串数据可能压缩很好却增加解析与内存，计算库传输不大却制造长任务。浏览器代码覆盖率可指出当前场景未执行字节，但一次场景未执行不等于全产品可删除；先在支持路由与状态矩阵中确认，再修改公开入口。

代码分割只在边界与用户路径匹配时有效。dynamic import 可能仍被父入口预取，过细 chunk 会增加调度和 header 成本，共享 chunk 也可能让一个低频功能进入所有页面。用Next.js 水合边界预算检查框架边界，用依赖升级与锁文件兼容门处理重复版本，不能通过删除 lockfile 重新求解来碰运气。

再读网络瀑布的因果链

DevTools Network 能显示 initiator、priority、协议、缓存与 timing。对每个关键资源区分排队、DNS、连接、TLS、请求等待与下载，并沿 initiator 找到发现它的 HTML、CSS、脚本或运行请求。晚开始可能是晚发现，也可能是前置任务阻塞；只有前者适合调整发现时机。

PerformanceResourceTiming 提供 fetchStart、responseStart、responseEnd、transferSize、encodedBodySize 等浏览器时序。跨源资源若没有通过 Timing-Allow-Origin 授权，部分细节会被限制，零值不能被解释为阶段耗时为零。采集脚本记录支持情况和资源名规范化，不把带 token、查询内容或用户标识的完整 URL 写入遥测。

同时检查连接复用、重定向、缓存响应头、优先级和资源依赖。preload 必须与稍后真实请求的 URL、模式和凭证属性匹配，否则会下载两次；prefetch 只是未来可能使用的提示，不能放进当前关键路径证明。图片瓶颈接续Web 图片优化，API 瀑布则应先查请求依赖，而不是把所有请求改为并发后破坏数据顺序。

导出的 HAR 往往包含 header、cookie 和响应正文，默认按敏感制品处理，在导出前使用合成账号，保存前再脱敏。截图适合交流，但真正分析保留结构化条目、构建摘要和场景身份，才能比较前后变化。

一次只改一条已证实路径

为每个候选原因写可失败实验。例如怀疑全量 locale 时，只把其改为按语言入口并保持其他变量不变；怀疑重复依赖时，先证明两个版本都进入同一路由，再做兼容去重；怀疑第三方阻塞时，用接口相同的确定性替身测上限，同时保留真实供应商场景确认外部成本。

修复后重跑同一冷暖场景，要求目标模块、请求边或长任务按预测变化，关键任务与错误路径仍通过。仅总大小下降不算成功，因为可能把成本移到更晚交互；仅 LCP 改善也不够，因为 INP、错误率或复访缓存可能退化。结果回到预算门统一裁决。

删除验证比新增提示更可靠。移除未使用 polyfill、拆掉错误客户端边界、删除重复 SDK 后，应在模块图和网络轨迹中同时消失；若产物仍存在，说明还有入口或构建缓存。清构建缓存只用于验证，不应成为每次发布的修复步骤。

报告列出假设、入口链、资源时序、改动、预测和实际差分。Agent 可以解析图并提出候选，但不能用包名声誉代替当前证据，也不能一次提交五种优化让因果不可分。最终结果经过编程 Agent 改动验证门。

Bundle 和瀑布诊断的核心不是追求最少文件，而是让每个关键字节和请求都有出现理由、发现路径和使用时刻。证据链闭合后，Vibe Coding 才是在删除瓶颈，而不是用更多加载提示覆盖一张看不懂的瀑布图。