核心用法
该技能为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缓存混用时，需明确请求级/跨请求缓存边界，避免内存泄漏或数据过期