（1597期）Vercel React Best Practices – Vercel官方62条React性能优化军规

Vercel官方62条React性能优化军规 Vercel官方React性能优化指南，62条实战规则覆盖瀑布流消除、Bundle优化、SSR等8大场景，开发者提升Next.js应用性能的可信标准。 使用说明 核心用法 该技能为Vercel官方维护的React/Next.js性能优化指南，包含62条结构化规则，按影响优先级分为8大类别。开发者可在代码编写、审查、重构阶段调用，覆盖从关键渲染路径到微优化的全链路场景。 关键触发场景： 新建React组件或Next.js页面时自动校验 数据获取层（客户端/服务端）架构设计 性能瓶颈诊断与Bundle体积优化 代码审查阶段的自动化规则引用 规则体系：| 优先级 | 类别 | 核心策略 ||--------|------|----------|| P1 | 瀑布流消除 | Promise.all并行化、Suspense流式渲染 || P2 | Bundle优化 | 避免barrel导入、next/dynamic懒加载 || P3 | 服务端性能 | React.cache()去重、RSC序列化精简 || P4-P8 | 客户端/渲染/JS/高级模式 | SWR去重、useMemo策略、DOM批处理等 | 每条规则遵循统一结构：问题说明 → 错误代码 → 正确代码 → 深层原理，支持规则级精读或快速索引。 显著优点 来源权威性：Vercel作为Next.js开发主体，规则与框架演进同步，规避社区方案滞后风险 工程化分级：CRITICAL/HIGH/MEDIUM/LOW四级优先级，资源紧张时精准投入高ROI优化点 可执行性强：62条规则均含代码对照，拒绝抽象原则，直接映射到代码变更 覆盖维度完整：从网络层（瀑布流）到渲染层（RSC/RSC hydratio）再到JS运行时（Map缓存、循环优化），形成性能优化闭环 潜在局限 Next.js专属倾向：虽名为React最佳实践，部分规则（next/dynamic、after()、React.cache）依赖Next.js/App Router特性，纯React项目需筛选适用 规则粒度较细：62条规则可能造成决策疲劳，需结合AGENTS.md全盘文档做统筹规划 生态锁定风险：better-all等工具引用、Vercel边缘运行时优化建议，存在Vendor-specific隐含假设 适合人群 Next.js应用开发者：尤其使用App Router、Server Components的现代化栈团队 性能专项负责人：需系统性清单排查渲染瀑布、Bundle体积、CLS/TTFB等指标 代码审查者：为团队建立可量化的React代码质量标准 常规风险 过度优化陷阱：LOW优先级规则（如js-hoist-regexp）在大多数场景收益有限，盲目应用反增代码复杂度 Suspense边界误用：async-suspense-boundaries需配合Streaming SSR环境，传统CSR应用可能引入hydration不匹配 缓存策略冲突：server-cache-react与自定义LRU缓存混用时，需明确请求级/跨请求缓存边界，避免内存泄漏或数据过期 原始说明 React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.j...