Vercel Engineering 官方 React/Next.js 性能优化指南，含 57 条工程级最佳实践，覆盖瀑布消除、包体积优化、服务端/客户端性能、渲染优化等 8 大核心领域，S 级安全认证。
说明：
## 综合评估
### 核心定位
该 Skill 是 **Vercel Engineering** 官方维护的 React 与 Next.js 性能优化权威指南，以 57 条结构化规则覆盖现代 React 应用性能优化的完整技术栈。作为纯文档型教育资源，它提供从代码审查到架构重构的全场景参考标准。
### 核心用法
**规则驱动的工作流**：
– **开发阶段**：通过规则前缀（`async-`、`bundle-`、`rerender-` 等）快速定位相关优化建议
– **代码审查**：引用具体规则编号（如 `async-parallel`、`bundle-dynamic-imports`）作为评审依据
– **重构指导**：按优先级分级（CRITICAL → LOW）逐层优化，避免过度工程化
**关键模式实战**：
1. **瀑布消除** (`async-*`)：强制并行数据获取，使用 `Promise.all()` / `better-all` 替代顺序 await
2. **包体积优化** (`bundle-*`)：直引替代 barrel import，`next/dynamic` 懒加载重型组件
3. **服务端性能** (`server-*`)：`React.cache()` 请求级去重，LRU 跨请求缓存，RSC 序列化最小化
4. **重渲染优化** (`rerender-*`)：函数式 setState、派生状态渲染期计算、`startTransition` 非紧急更新
### 显著优点
| 维度 | 优势 |
|——|——|
| **权威性** | Vercel 官方工程团队出品，与 Next.js 演进同步，规则经过大规模生产验证 |
| **系统性** | 8 大类别 + 4 级优先级，覆盖网络层到渲染层的完整性能链路 |
| **可操作性** | 每条规则含「错误示例 → 正确示例 → 原理解析」三段式结构，即学即用 |
| **安全纯净** | 纯 Markdown 文档，无可执行代码，零供应链风险，S 级安全认证 |
| **版本兼容** | 兼顾 React 18+ 新特性（Server Components、`use`、Activity）与经典模式 |
### 潜在局限
1. **框架绑定深度**：部分规则（`next/dynamic`、`React.cache()`、`after()`）为 Next.js/App Router 专属，纯 React/Cra 项目需筛选适用
2. **演进速度**：React 生态快速迭代（如 React 19 Compiler 自动记忆化），部分手动优化规则可能逐步自动化
3. **场景覆盖偏向**：聚焦 Web 应用性能，对 React Native、桌面端（Tauri/Electron）适配性有限
4. **团队共识成本**：57 条规则需团队培训与优先级共识，小型项目可能过度设计
### 适合人群
– **中高级前端工程师**：需系统化提升 React 性能调优能力
– **技术负责人/架构师**：制定团队代码规范与审查标准
– **Next.js 项目团队**：直接应用官方工程实践，减少摸索成本
– **性能优化专项**：针对 LCP、TTI、CLS 等核心指标的专项改进
### 常规风险
| 风险类型 | 说明 | 缓解建议 |
|———-|——|———-|
| **过度优化** | 低优先级规则（`js-min-max-loop`）在现代引擎收益有限，引入代码复杂度 | 按优先级分级实施，基准测试验证 |
| **模式误用** | `useMemo` 滥用、`dynamic` 过度拆分反而损害性能 | 遵循规则中的「NEVER」清单，结合 Profiler 数据 |
| **版本错位** | React 19 Compiler 可能使部分手动记忆化规则冗余 | 关注官方更新，适时简化规则集 |
| **SSR/SSG 混淆** | `server-*` 规则需区分请求时（SSR）与构建时（SSG）场景 | 理解 Next.js 渲染模式后再应用 |
### 认证摘要
CLS-Certify S 级（95分），T2 可信来源，零安全发现，适合作为团队级性能规范基线。
会员专属
