vercel-react-best-practices

# Vercel React 最佳实践 由 Vercel 维护的 React 和 Next.js 应用综合性能优化指南。包含 8 个类别中的 45 条规则，按影响程度排序，以指导自动化重构和代码生成。 ## 何时应用 在以下情况参考这些指南： - 编写新的 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-all - `async-api-routes` - 在 API 路由中尽早启动 promise，尽晚 await - `async-suspense-boundaries` - 使用 Suspense 流式传输内容 ### 2. 包体积优化 (关键) - `bundle-barrel-imports` - 直接导入，避免 Barrel 文件 - `bundle-dynamic-imports` - 针对重型组件使用 next/dynamic - `bundle-defer-third-party` - 在水合后加载分析/日志记录 - `bundle-conditional` - 仅在功能激活时加载模块 - `bundle-preload` - 在悬停/聚焦时预加载以提升感知速度 ### 3. 服务端性能 (高) - `server-cache-react` - 使用 React.cache() 进行每请求去重 - `server-cache-lru` - 使用 LRU 缓存进行跨请求缓存 - `server-serialization` - 最小化传递给客户端组件的数据 - `server-parallel-fetching` - 重构组件以并行化获取 - `server-after-nonblocking` - 使用 after() 进行非阻塞操作 ### 4. 客户端数据获取 (中高) - `client-swr-dedup` - 使用 SWR 进行自动请求去重 - `client-event-listeners` - 全局事件监听器去重 ### 5. 重渲染优化 (中) - `rerender-defer-reads` - 不要订阅 s