tomevault-io Vercel React 最佳实践
面向 React 和 Next.js 应用的性能优化指南，由 Vercel 维护。包含 8 大类共 57 条规则，按影响程度排序，用于指导自动化重构与代码生成。
何时使用
在以下场景参考本指南：
- 编写新的 React 组件或 Next.js 页面
- 实现数据获取（客户端或服务端）
- 评审性能问题
- 重构现有 React/Next.js 代码
- 优化打包体积或加载时间
规则类别与优先级
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布请求 | 关键 | async- |
| 2 | 打包体积优化 | 关键 | bundle- |
| 3 | 服务端性能 | 高 | server- |
| 4 | 客户端数据获取 | 中高 | client- |
| 5 | 重渲染优化 | 中 | rerender- |
| 6 | 渲染性能 | 中 | rendering- |
| 7 | JavaScript 性能 | 低中 | js- |
| 8 | 高级模式 | 低 | advanced- |
速查
1. 消除瀑布请求（关键）
async-defer-await- 将 await 移到实际使用的分支内async-parallel- 独立操作用 Promise.all()async-dependencies- 部分依赖用 better-allasync-api-routes- API 路由中早创建 promise、晚 awaitasync-suspense-boundaries- 用 Suspense 流式输出内容
2. 打包体积优化（关键）
bundle-barrel-imports- 直接导入，避免 barrel 文件bundle-dynamic-imports- 重型组件用 next/dynamicbundle-defer-third-party- hydration 后再加载分析/日志bundle-conditional- 仅在该功能激活时加载模块bundle-preload- hover/focus 时预加载，提升感知速度
3. 服务端性能（高）
server-auth-actions- Server Actions 像 API 路由一样做鉴权server-cache-react- 用 React.cache() 做请求级去重server-cache-lru- 跨请求缓存用 LRUserver-dedup-props- 避免 RSC props 重复序列化server-serialization- 传给 Client 组件的数据尽量精简server-parallel-fetching- 调整组件结构以并行请求server-after-nonblocking- 非阻塞操作用 after()
4. 客户端数据获取（中高）
client-swr-dedup- 用 SWR 自动请求去重client-event-listeners- 全局事件监听去重client-passive-event-listeners- 滚动用 passive 监听client-localstorage-schema- localStorage 数据版本化并精简
5. 重渲染优化（中）
rerender-defer-reads- 不在仅用于回调的 state 上订阅rerender-memo- 昂贵逻辑抽到 memo 组件rerender-memo-with-default-value- 非原始类型默认 props 提升rerender-dependencies- effect 依赖用原始类型rerender-derived-state- 订阅派生布尔值而非原始值rerender-derived-state-no-effect- 在 render 中派生，不用 effectrerender-functional-setstate- 用函数式 setState 保持回调稳定rerender-lazy-state-init- 昂贵初始值用函数传 useStatererender-simple-expression-in-memo- 简单原始类型不必 memorerender-move-effect-to-event- 交互逻辑放进事件处理rerender-transitions- 非紧急更新用 startTransitionrerender-use-ref-transient-values- 瞬态频繁值用 ref
6. 渲染性能（中）
rendering-animate-svg-wrapper- 动画作用在 div 包裹层，别动 SVGrendering-content-visibility- 长列表用 content-visibilityrendering-hoist-jsx- 静态 JSX 提到组件外rendering-svg-precision- 降低 SVG 坐标精度rendering-hydration-no-flicker- 仅客户端数据用内联 scriptrendering-hydration-suppress-warning- 预期不一致时压制警告rendering-activity- 显隐用 Activity 组件rendering-conditional-render- 条件渲染用三元而非 &&rendering-usetransition-loading- 加载态优先 useTransition
7. JavaScript 性能（低中）
js-batch-dom-css- 通过 class 或 cssText 批量改 CSSjs-index-maps- 重复查找用 Mapjs-cache-property-access- 循环内缓存对象属性js-cache-function-results- 模块级 Map 缓存函数结果js-cache-storage- 缓存 localStorage/sessionStorage 读取js-combine-iterations- 合并多次 filter/map 为一次循环js-length-check-first- 昂贵比较前先查 lengthjs-early-exit- 函数内尽早 returnjs-hoist-regexp- RegExp 提到循环外js-min-max-loop- min/max 用循环代替 sortjs-set-map-lookups- O(1) 查找用 Set/Mapjs-tosorted-immutable- 不可变排序用 toSorted()
8. 高级模式（低）
advanced-event-handler-refs- 事件处理存 refadvanced-init-once- 应用级只初始化一次advanced-use-latest- useLatest 稳定回调 ref
使用方式
阅读单条规则文件获取说明与示例：
rules/async-parallel.md
rules/bundle-barrel-imports.md
每条规则包含：为何重要、错误示例、正确示例、补充说明与参考。
完整展开版见 rules/ 目录下各 .md 规则文件。
Converted and distributed by TomeVault — claim your Tome and manage your conversions.