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批处理等 |
每条规则遵循统一结构：问题说明 → 错误代码 → 正确代码 → 深层原理，支持规则级精读或快速索引。
## 显著优点
1. **来源权威性**：Vercel作为Next.js开发主体，规则与框架演进同步，规避社区方案滞后风险
2. **工程化分级**：CRITICAL/HIGH/MEDIUM/LOW四级优先级，资源紧张时精准投入高ROI优化点
3. **可执行性强**：62条规则均含代码对照，拒绝抽象原则，直接映射到代码变更
4. **覆盖维度完整**：从网络层（瀑布流）到渲染层（RSC/RSC hydratio）再到JS运行时（Map缓存、循环优化），形成性能优化闭环
## 潜在局限
1. **Next.js专属倾向**：虽名为React最佳实践，部分规则（`next/dynamic`、`after()`、`React.cache`）依赖Next.js/App Router特性，纯React项目需筛选适用
2. **规则粒度较细**：62条规则可能造成决策疲劳，需结合`AGENTS.md`全盘文档做统筹规划
3. **生态锁定风险**：`better-all`等工具引用、Vercel边缘运行时优化建议，存在Vendor-specific隐含假设
## 适合人群
– **Next.js应用开发者**：尤其使用App Router、Server Components的现代化栈团队
– **性能专项负责人**：需系统性清单排查渲染瀑布、Bundle体积、CLS/TTFB等指标
– **代码审查者**：为团队建立可量化的React代码质量标准
## 常规风险
1. **过度优化陷阱**：LOW优先级规则（如`js-hoist-regexp`）在大多数场景收益有限，盲目应用反增代码复杂度
2. **Suspense边界误用**：`async-suspense-boundaries`需配合Streaming SSR环境，传统CSR应用可能引入hydration不匹配
3. **缓存策略冲突**：`server-cache-react`与自定义LRU缓存混用时，需明确请求级/跨请求缓存边界，避免内存泄漏或数据过期
会员专属
