页面请求一个接一个
页面数据请求串行等待时，将加载代码、请求依赖和耗时记录放在一起检查。判断独立请求能否并行，以及 await 是否可以移到真正需要它的分支。修改后沿相同加载路径比较表现，用前后测量确认调整是否减少了不必要的等待。
Vercel React Best Practices by Vercel Labs
使用 Vercel Labs 的 Vercel React Best Practices，辅助编写、审查和重构 React 与 Next.js 代码。围绕数据请求、包体积、渲染和状态更新寻找改进方向，结合具体页面与交互，优先处理有实际影响的性能问题。
找出值得优先处理的 React 性能问题
围绕一个 React 路由或交互说明现象及已有证据，将请求限定到请求瀑布、客户端代码和渲染问题。预期结果应关联具体文件，并说明拟议修改怎样通过测量核验。
带入 Floatboat 的请求
请求可预览和复制，不会从此处自动发送。
参考来源: Vercel React Best Practices https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md 先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。 我的任务: 检查这个 Next.js 产品页有没有请求瀑布和不必要的客户端 JavaScript，按影响排序并指出具体文件。 期望交付: 按影响排序的问题，关联具体文件、证据及修改后的验证方法。
关于 Vercel React Best Practices
Vercel React Best Practices 是 Vercel Labs 在 agent-skills 仓库中发布的 Agent Skill，为 React 与 Next.js 代码提供按影响程度排序的性能规则。内容涵盖请求瀑布、包体积、服务端工作、客户端数据获取、重渲染、渲染过程与 JavaScript 开销，帮助 Agent 决定先检查哪些路径。各条规则附有解释与实现示例，适合围绕具体路由或组件开展审查和重构。使用时应说明待改进的页面、交互与现有表现，再把建议对应到代码。安装 Skill 获得的是操作指引；修改是否有效，需要通过项目中的行为验证和前后测量来判断。
Vercel React Best Practices Skill的使用场景
请求瀑布、包体积和重复渲染需要不同证据。了解 Vercel React Best Practices 如何结合加载、导入与交互分析，选择可通过前后测量核验的优化方向。
客户端组件加载过多代码
客户端代码体积过大时，先分析入口、导入路径和包体积，而不是立即增加加载提示。沿聚合导入、重型模块与第三方脚本定位实际负担，再评估拆包或延迟加载。调整后比较包分析结果，判断哪些依赖确实需要采用不同加载方式。
组件反复做昂贵计算
组件频繁更新并重复执行高开销工作时，先查看交互记录和性能分析。检查状态位置、派生值与重新渲染的触发原因，再决定局部优化方式，避免到处添加记忆化。修改后复现原交互，同时核对性能变化和行为是否正确。
检查重复的服务端工作
页面显示正确时，路由内部也可能重复准备数据或计算。沿服务端路径与请求边界定位重复位置，再将限定的复用或调度调整与原行为比较。保留时效和访问要求，并使用相同请求测量，不能只看到工作次数减少就认定优化已经有效。
如何优化 React 性能
性能优化需要前后可比较的起点。先将规则对应到可复现路由或交互，只修改已选路径，再重复相同用户操作，同时检查功能行为和测量结果，判断改动是否真正有效。
明确性能问题
指定路由或交互，说明可复现的性能现象。有追踪、网络时序或包体积报告时，一并交给 Agent。
检查相关规则
让 Agent 按匹配的规则类别检查代码，并参考影响排序确定重点。核对建议后，再修改选定路径。
比较行为与指标
修改后重复同一条用户路径。同时检查功能正确性，以及加载、交互或包体积指标。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Vercel React Best Practices 常见问题
Vercel React Best Practices 只能用于 Next.js 吗？
不是。许多规则适用于 React 通用代码，部分章节针对 Next.js 服务端渲染和路由；只应用与当前技术栈匹配的规则。
它会重写整个应用吗？
它是给 Agent 的指令集，不是自动重构服务。应明确要审查的路由或组件。
如何知道建议真的有效？
对同一用户路径做前后测量。命中规则代表值得调查，不等于页面已经变快。
原始规则在哪里？
原始 SKILL.md 位于 Vercel Labs 的 agent-skills 仓库，并指向各条规则文件；本页可直接打开来源。
应该先排查哪一种性能问题？
先选一个有测量依据、用户能感知的问题，例如请求瀑布或交互延迟，再参考规则的影响排序定位原因，并在相同场景下比较修改前后。
服务端与客户端可以套用相同规则吗？
修改请求或状态逻辑前先确认代码在哪里执行。服务端渲染与客户端交互的优化目标不同，涉及同一个组件也不能直接互换做法。
开始性能审查前需要提供什么？
提供路由或组件文件、React 与 Next.js 版本、可复现的现象，以及已有追踪或包体积报告。这些信息能帮助 Agent 选择适用规则，并为修改后的对比提供基线。