react-best-practices

⚛️ Vercel 官方 React 性能优化指南

Vercel Engineering 出品的 57 条 React/Next.js 性能优化权威法则,涵盖请求瀑布消除与包体积优化,助力构建高性能现代 Web 应用。

收藏
12.5k
安装
3.5k
版本
v1.0.0
CLS 安全性认证2026-05-03
点击查看完整报告 >

使用说明

核心用法

本 Skill 提供了一套系统化的 React 与 Next.js 性能优化知识体系,包含 57 条具体规则,按优先级分为 8 大类别:消除请求瀑布(CRITICAL)、包体积优化(CRITICAL)、服务端性能(HIGH)、客户端数据获取(MEDIUM-HIGH)、重渲染优化(MEDIUM)、渲染性能(MEDIUM)、JavaScript 性能(LOW-MEDIUM)以及高级模式(LOW)。开发者可通过查询特定规则(如 async-parallelbundle-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 级)。常规风险主要在于:代码示例仅供学习参考,直接复制到生产环境前需进行充分测试;部分优化建议(如并行请求)可能增加服务器并发压力,需根据基础设施能力权衡;动态导入等策略可能引入运行时错误处理复杂度,需确保错误边界完善。

安全解读

核心功能

本技能是由 Vercel Engineering 官方维护的 React 与 Next.js 性能优化最佳实践集合,包含 57 条结构化规则,按影响优先级分为 8 个类别,为开发者提供从代码编写到审查、重构的全流程性能指导。

八大规则类别

| 优先级 | 类别 | 核心关注 |
|--------|------|----------|
| **1** | 消除请求瀑布 (Eliminating Waterfalls) | `Promise.all` 并行请求、Suspense 流式渲染 |
| **2** | 包体积优化 (Bundle Size) | 避免 barrel imports、动态导入 `next/dynamic`、第三方库延迟加载 |
| **3** | 服务端性能 (Server-Side) | Server Actions 认证、`React.cache()` 请求去重、RSC 序列化优化 |
| **4** | 客户端数据获取 (Client Fetching) | SWR 自动去重、被动事件监听、localStorage 最小化 |
| **5** | 重渲染优化 (Re-render) | `useMemo` 合理提取、函数式 `setState`、状态派生优化 |
| **6** | 渲染性能 (Rendering) | `content-visibility` 长列表、SVG 动画优化、JSX 静态提升 |
| **7** | JavaScript 微优化 (JS Perf) | DOM 批量操作、Map/Set O(1) 查找、`toSorted` 不可变排序 |
| **8** | 高级模式 (Advanced) | `useLatest`、事件处理器 ref、单次初始化模式 |

显著优点

  • 来源权威: 直接来自 Vercel 官方工程团队,与 Next.js 框架演进同步
  • 实战导向: 每条规则包含 ❌ 错误示例 + ✅ 正确示例 + 原理说明,可立即落地
  • 优先级清晰: CRITICAL/HIGH/MEDIUM/LOW 四级分级,团队可聚焦高影响优化
  • 覆盖全面: 从网络层( waterfalls )到渲染层( Activity 组件 )再到 JS 引擎层全覆盖

局限与注意事项

  • 版本绑定: 部分规则(如 React.cache()、Server Actions、after() 函数)依赖较新的 React 19/Next.js 14+ 版本,旧项目需评估兼容性
  • 场景假设: 规则默认面向中大规模应用,小型项目可能过度优化
  • 静态文档: 纯 Markdown 格式,无自动化检测或 IDE 插件集成,需人工应用

适合人群

  • 前端架构师/TL: 制定团队代码规范和性能基线
  • React/Next.js 开发者: 日常编码参考和 Code Review checklist
  • 性能优化专项: 系统性排查应用性能瓶颈

常规风险

  • 误用动态导入可能导致过度代码分割,增加网络往返
  • 过度使用 useMemo 可能引入内存开销,需配合 Profiler 验证
  • Server Actions 认证规则若不遵守,可能造成安全漏洞

react-best-practices 内容

rules文件夹
手动下载zip · 69.8 kB
advanced-event-handler-refs.mdtext/markdown
请选择文件