Vercel React Best Practices

Vercel React Best Practices 是什么

这是 Vercel Labs 为 React 和 Next.js 项目整理的性能优化 Skill，版本 1.0.0 共包含 70 条规则，按影响分成 8 类。它可用于编写新组件、评审现有代码和进行有针对性的重构。

规则范围与优先级

最高优先级是消除异步 waterfall 和缩减客户端 bundle，其后覆盖服务端性能、客户端数据获取、重渲染、渲染效率、JavaScript 微优化及高级模式。每条规则包含问题、示例与改进方式，适合按热点逐条检查。

典型工作流

先识别页面或组件的真实瓶颈，再从对应类别选择规则。网络请求应尽量并行或提前启动；大型依赖按需加载；服务端使用合适缓存；客户端请求做去重；组件则检查不必要的状态、effect 和渲染。输出可以是代码修改，也可以是带优先级的审查意见。

依赖与限制

Skill 本身是规则集，不提供性能测量环境。实际结论仍需结合 React/Next.js 版本、构建工具、浏览器数据和业务约束验证。不是每条规则都适合所有项目，过早 memo 或复杂缓存也可能增加维护成本。

评审与验证方法

优化前先记录真实指标，例如请求瀑布、首屏 JavaScript、服务端响应时间和组件渲染次数。审查意见应给出文件位置、所属规则、预期影响和验证方式，高影响问题优先。修改后重新构建并比较 bundle、网络时序和用户指标；如果规则增加明显复杂度却没有测量收益，应保留更简单的实现。

来源与许可

本条目依据 vercel-labs/agent-skills 固定提交中的完整 SKILL.md 和编译规则文档整理。SKILL.md 元数据声明 MIT 许可证，作者为 Vercel。

常见问题

1. 规则覆盖哪些方面？

覆盖 waterfall、bundle、服务端、客户端请求、重渲染、渲染、JavaScript 和高级模式 8 类。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

2. 最优先处理什么？

先消除串行等待的请求链，再处理会进入客户端的过大依赖。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

3. 适用于 Next.js 吗？

适用，规则同时覆盖 React 通用模式和 Next.js 服务端、客户端边界。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

4. 会自动修改代码吗？

它可指导编写、评审或重构；是否实际修改取决于用户任务和授权。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

5. 如何减少重复请求？

可使用服务端缓存、请求记忆和客户端数据层去重，但需结合数据新鲜度要求。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

6. 如何控制重渲染？

检查状态位置、派生值、effect 依赖和组件边界，再选择 memo 等手段。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

7. 所有规则都必须应用吗？

不必。应按性能数据、版本和可维护性筛选，避免机械套用。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。

8. 输出通常是什么？

可以是具体代码差异、文件级问题清单，或按影响排序的优化计划。实际使用时还应结合当前版本、权限、输入数据和运行环境复核结果，并在重要任务中保留人工确认。