页面请求一个接一个
检查独立请求是否能并行，以及 await 是否可以移到真正需要它的分支。
Vercel React Best Practices by Vercel Labs
使用 Vercel Labs 的 Vercel React Best Practices，辅助编写、审查和重构 React 与 Next.js 代码。围绕数据请求、包体积、渲染和状态更新寻找改进方向，结合具体页面与交互，优先处理有实际影响的性能问题。
安装与快速上手
选择你使用的 Agent，查看对应的安装或使用方式。在 Floatboat 中，可复制请求让 Agent 读取原始说明；其他选项会显示该 Skill 的安装命令或发布者提供的原生步骤。
选择 Agent
在 Floatboat 中开始
复制请求，粘贴到 Floatboat 对话
请阅读 https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md 中的 Vercel React Best Practices 原始说明，介绍它的用途、所需工具和安装方式，再协助我使用。由 Agent 读取原始说明，再确认当前环境的使用方式。
下载 Floatboat ↗试试这样提问
检查这个 Next.js 产品页有没有请求瀑布和不必要的客户端 JavaScript，按影响排序并指出具体文件。
关于 Vercel React Best Practices
Vercel React Best Practices 是 Vercel Labs 在 agent-skills 仓库中发布的 Agent Skill，为 React 与 Next.js 代码提供按影响程度排序的性能规则。内容涵盖请求瀑布、包体积、服务端工作、客户端数据获取、重渲染、渲染过程与 JavaScript 开销，帮助 Agent 决定先检查哪些路径。各条规则附有解释与实现示例，适合围绕具体路由或组件开展审查和重构。使用时应说明待改进的页面、交互与现有表现，再把建议对应到代码。安装 Skill 获得的是操作指引；修改是否有效，需要通过项目中的行为验证和前后测量来判断。
React 性能优化的使用场景
探索 React 与 Next.js 中适合开展性能审查的任务：页面请求串行、客户端加载过多代码，或组件反复执行计算。结合用户能感知的现象和已有测量，选择相关规则，明确下一步值得检查与验证的代码范围。
客户端组件加载过多代码
先检查聚合导入、重型模块和第三方脚本，再决定是否需要加载提示。
组件反复做昂贵计算
先找状态放置、派生值和重渲染触发点，不要在所有组件上盲目加 memo。
如何优化 React 性能
从一个路由、组件或具体交互开始，向 Agent 说明性能现象与已有测量。参考规则的影响排序检查相关代码，实施范围明确的修改，再沿相同用户路径核对行为与指标，判断改动是否有效。
- 01
明确性能问题
指定路由或交互，说明可复现的性能现象。有追踪、网络时序或包体积报告时，一并交给 Agent。
- 02
检查相关规则
让 Agent 按匹配的规则类别检查代码，并参考影响排序确定重点。核对建议后，再修改选定路径。
- 03
比较行为与指标
修改后重复同一条用户路径。同时检查功能正确性，以及加载、交互或包体积指标。
探索更多 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 选择适用规则，并为修改后的对比提供基线。