vercel-react-best-practices

用途：这是一份面向 React 与 Next.js 应用的性能优化指南，由 Vercel 维护，包含 8 大类共 45 条规则，按影响程度排序，用于指导自动化重构与代码生成。适用时机：编写新的 React 组件或 Next.js 页面、实现数据获取（客户端或服务端）、审查代码性能问题、重构现有 React/Next.js 代码、优化打包体积或加载时间时参考。主要能力按优先级分为八类：1. 消除瀑布流（关键，async- 前缀），如将 await 移入实际使用分支、用 Promise.all() 处理独立操作、用 better-all 处理部分依赖、API 路由中提前启动 Promise 延迟 await、用 Suspense 流式输出内容；2. 打包体积优化（关键，bundle- 前缀），如直接导入避免 barrel 文件、用 next/dynamic 加载重型组件、在水合后再加载分析/日志、按需加载模块、悬停或聚焦时预加载；3. 服务端性能（高，server- 前缀），如用 React.cache() 做每请求去重、用 LRU 缓存跨请求缓存、减少传给客户端组件的数据、重构组件并行获取、用 after() 执行非阻塞操作；4. 客户端数据获取（中高，client- 前缀），如用 SWR 自动去重请求、去重全局事件监听器；5. 重渲染优化（中，rerender- 前缀），如不订阅仅在回调中使用的状态、将昂贵工作提取为 memo 组件、effect 用原始类型依赖、订阅派生布尔值、函数式 setState、useState 惰性初始化、用 startTransition 处理非紧急更新；6. 渲染性能（中，rendering- 前缀），如对 div 包装层而非 SVG 做动画、长列表用 content-visibility、将静态 JSX 提升到组件外、降低 SVG 坐标精度、用内联脚本处理仅客户端数据避免闪烁、用 Activity 组件控制显示隐藏、条件渲染用三元而非 &&；7. JavaScript 性能（低中，js- 前缀），如通过类名或 cssText 批量修改 CSS、为重复查找建 Map、循环中缓存对象属性、模块级 Map 缓存函数结果、缓存 localStorage/sessionStorage 读取、合并多次 filter/map 为一次循环、先做数组长度检查、尽早返回、将正则提升到循环外、用循环代替 sort 求极值、用 Set/Map 做 O(1) 查找、用 toSorted() 保持不可变；8. 高级模式（低，advanced- 前缀），如把事件处理器存入 ref、用 useLatest 保持回调引用稳定。使用方式：阅读单条规则文件获取详细说明与代码示例，如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md，每个规则文件含原因说明、错误代码示例、正确代码示例及补充上下文与参考。完整编译文档见 AGENTS.md。限制：资料未提供具体安装命令、收费或价格信息，暂未提供。