（1436期）react-best-practices – Vercel 官方 React 性能优化指南

Vercel 官方 React 性能优化指南 Vercel Engineering 出品的 57 条 React/Next.js 性能优化权威法则，涵盖请求瀑布消除与包体积优化，助力构建高性能现代 Web 应用。 使用说明 核心用法 本 Skill 提供了一套系统化的 React 与 Next.js 性能优化知识体系，包含 57 条具体规则，按优先级分为 8 大类别：消除请求瀑布（CRITICAL）、包体积优化（CRITICAL）、服务端性能（HIGH）、客户端数据获取（MEDIUM-HIGH）、重渲染优化（MEDIUM）、渲染性能（MEDIUM）、JavaScript 性能（LOW-MEDIUM）以及高级模式（LOW）。开发者可通过查询特定规则（如 async-parallel、bundle-dynamic-imports）获取针对性的代码示例和最佳实践，或阅读完整的 AGENTS.md 文档进行系统性学习。 显著优点 首先，内容权威性高，明确标注源自 Vercel Engineering 团队，涵盖了现代 React 应用开发中最关键的性能瓶颈解决方案。其次，规则分类科学，按影响程度（CRITICAL 到 LOW）排序，帮助开发者优先处理高影响力问题。第三，实用性极强，每条规则均提供"错误示例 vs 正确示例"的对比代码，涵盖并行数据获取、动态导入、函数式 setState 等具体模式，可直接应用于代码审查和重构工作。 潜在缺点或局限性 作为纯文档型 Skill，其局限性在于仅提供指导建议而不直接执行优化。部分规则可能依赖特定 React/Next.js 版本（如 React.cache、Server Components），在低版本项目中可能无法直接应用。此外，虽然内容声称来自 Vercel，但托管于个人社区账号（T3 来源），虽经安全验证无恶意代码，但在企业合规场景中可能需要额外审核。代码示例多为简化演示，实际复杂业务场景需要开发者自行判断和调整。 适合的目标群体 本 Skill 主要面向：使用 React 或 Next.js 开发 Web 应用的前端工程师；需要进行代码审查、关注性能优化的技术负责人；希望学习现代 React 性能优化模式的初中级开发者；以及面临首屏加载慢、渲染卡顿、包体积过大等具体性能问题的项目团队。 使用风险 作为纯 Markdown 文档型 Skill，无代码执行能力，无数据收集行为，无系统级操作风险，安全性极高（S 级）。常规风险主要在于：代码示例仅供学习参考，直接复制到生产环境前需进行充分测试；部分优化建议（如并行请求）可能增加服务器并发压力，需根据基础设施能力权衡；动态导入等策略可能引入运行时错误处理复杂度，需确保错误边界完善。 原始说明 React and Next.js performance optimization guidelines from Vercel Engineering. 57 rules across 8 categories for writing, reviewing, and refactoring React code.