用途:这是一份面向 React 与 Next.js 应用的性能优化指南,由 Vercel 维护,用于在编写新组件或页面、实现数据获取、审查性能问题、重构既有代码、优化包体积或加载时间时提供参考。
主要能力:包含 70 条规则,分 8 个类别并按影响优先级排序。1 消除瀑布流(CRITICAL,async- 前缀),如 await 前检查廉价的同步条件、把 await 移入实际使用的分支、用 Promise.all() 并行独立操作、在 API 路由中尽早启动 Promise 并延后 await、用 Suspense 流式输出。2 包体积优化(CRITICAL,bundle- 前缀),如直接导入避免 barrel 文件、优先可静态分析的导入与文件系统路径、用 next/dynamic 加载重组件、在水合后再加载分析/日志、按功能激活才加载模块、悬停/聚焦时预加载。3 服务端性能(HIGH,server- 前缀),如像 API 路由一样鉴权 server actions、用 React.cache() 做每请求去重、用 LRU 做跨请求缓存、避免 RSC props 重复序列化、将静态 I/O 提升到模块级、避免 RSC/SSR 模块级可变请求状态、减少传给客户端组件的数据、并行化抓取、用 after() 处理非阻塞操作。4 客户端数据获取(MEDIUM-HIGH,client- 前缀),如用 SWR 自动去重、去重全局事件监听、为滚动使用 passive 监听、为 localStorage 数据加版本并最小化。5 重渲染优化(MEDIUM,rerender- 前缀),如只用于回调的状态不订阅、昂贵工作提取到 memo 组件、非原始默认 props 提升、effect 使用原始依赖、订阅派生布尔值、渲染期间派生状态、函数式 setState、useState 惰性初始化、简单原始值不用 memo、拆分独立依赖的 hooks、交互逻辑放事件处理器、用 startTransition 处理非紧急更新、用 useDeferredValue 保持输入响应、用 refs 存瞬态频繁值、不在组件内定义组件。6 渲染性能(MEDIUM,rendering- 前缀),如动画 div 包装而非 SVG、长列表用 content-visibility、静态 JSX 提取到组件外、降低 SVG 坐标精度、用内联脚本处理仅客户端数据以避免水合闪烁、抑制预期不匹配告警、用 Activity 组件控制显隐、条件渲染用三元而非 &&、加载状态优先 useTransition、用 React DOM 资源提示预加载、script 标签用 defer 或 async。7 JavaScript 性能(LOW-MEDIUM,js- 前缀),如成组修改 CSS、用 Map 做重复查找、循环中缓存属性访问与函数结果、缓存 storage 读取、合并 filter/map、先检查数组长度、提前返回、正则提升到循环外、用循环求 min/max、用 Set/Map 做 O(1) 查找、用 toSorted() 保持不可变、用 flatMap 一次完成映射与过滤、用 requestIdleCallback 延后非关键工作。8 高级模式(LOW,advanced- 前缀),如 useEffectEvent 结果不入 effect 依赖、事件处理器存 refs、应用每次加载仅初始化一次、用 useLatest 获得稳定回调 ref。
使用方式:按需阅读单条规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md),每条含原因说明、错误代码示例与正确代码示例及额外上下文;完整展开版见 references/compiled.md。
适用场景:React/Next.js 的性能审查、重构与代码生成提示。限制:资料未提供安装命令、版本适配范围、许可与收费信息,暂未提供。