请求
页面请求一个接一个
检查独立请求是否能并行，以及 await 是否可以移到真正需要它的分支。
01 / Skill 档案 · React · 性能实践
Vercel React Best Practices：先处理代价最高的性能问题
用于编写和审查 React、Next.js 代码的规则型 Skill。它先关注数据请求瀑布和包体积，再处理影响较小的细节优化。
发布方、原始来源与安装方式
原发布方 Vercel Labs · 类型: 代码审查与实现 Skill
本页为独立介绍；Vercel Labs 未对 Floatboat 作出背书。
上游安装方式
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices通过开放的 Skills CLI 安装上游 Skill，不代表 Floatboat 内置该能力。
一个具体请求
原始规则按影响程度分成八类，覆盖请求、包体积、服务端渲染、客户端数据和重渲染。适合做有重点的代码审查，但不能替代真实页面的性能测量。
向 Agent 提问
“检查这个 Next.js 产品页有没有请求瀑布和不必要的客户端 JavaScript，按影响排序并指出具体文件。”
应该得到什么
合格的审查应指出具体请求链或导入，提出有限范围的修改，并区分已测量的问题与推测。
何时使用 React Best Practices
编写、审查或重构 React 代码时，用它建立有优先级的检查清单。
包体积
客户端组件加载过多代码
先检查聚合导入、重型模块和第三方脚本，再决定是否需要加载提示。
渲染
组件反复做昂贵计算
先找状态放置、派生值和重渲染触发点，不要在所有组件上盲目加 memo。
它无法直接解决什么
- 保证某个 Lighthouse 分数；规则必须在目标应用上测量验证。
- 没有相关 React 或 Next.js 代码路径的项目。
如何从性能症状走到代码修改
先按高影响类别定位问题，再检查相关代码路径。
- 01
找出慢路径
锁定页面或交互，收集追踪结果或可复现的症状。
- 02
先用高影响规则
阅读相关规则，只检查影响该路径的代码。
- 03
验证结果
修改后比较行为和指标，不把风格改写当作性能收益。
02 / 使用指南
按影响程度选择性能规则，而不是追逐技巧
原始规则把请求瀑布和包体积放在小幅优化之前。每项修改都应对应具体页面的请求与渲染链路。
这个 React 性能 Skill 覆盖哪些问题？
八组规则涵盖异步瀑布、包体积、服务端工作、客户端请求、重渲染、渲染过程、JavaScript 开销和进阶模式。排序的目的，是让审查先处理可能影响更大的问题。
它是性能分析器或自动提速工具吗？
不是。SKILL.md 向 Agent 提供规则与参考资料；它能提出修改建议，但前后对比、网络时序和用户指标仍要在项目中检验。
你能拿到什么
- 按影响排序的候选修复
- 对应代码位置与规则
- 主要修改的测量计划
使用前先核对
- 使用版本相关建议前确认 React、Next.js 版本。
- 修改前后测量受影响路由。
- 保留原有行为与无障碍支持。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
常见问题
Vercel React Best Practices 只能用于 Next.js 吗？
不是。许多规则适用于 React 通用代码，部分章节针对 Next.js 服务端渲染和路由；只应用与当前技术栈匹配的规则。
它会重写整个应用吗？
它是给 Agent 的指令集，不是自动重构服务。应明确要审查的路由或组件。
如何知道建议真的有效？
对同一用户路径做前后测量。命中规则代表值得调查，不等于页面已经变快。
原始规则在哪里？
原始 SKILL.md 位于 Vercel Labs 的 agent-skills 仓库，并指向各条规则文件；本页可直接打开来源。