用途:这是一份面向 React 与 Next.js 应用的性能优化准则,由 Vercel 维护,供编写、审查或重构代码及自动化重构、代码生成时参考。
适用时机:编写新的 React 组件或 Next.js 页面;实现客户端或服务端数据获取;审查性能问题;重构既有代码;优化包体积或加载时间。
规则分类(按优先级):一、消除瀑布请求(CRITICAL,前缀 async-);二、包体积优化(CRITICAL,bundle-);三、服务端性能(HIGH,server-);四、客户端数据获取(MEDIUM-HIGH,client-);五、重渲染优化(MEDIUM,rerender-);六、渲染性能(MEDIUM,rendering-);七、JavaScript 性能(LOW-MEDIUM,js-);八、高级模式(LOW,advanced-)。
覆盖要点示例:用 Promise.all 并行独立操作、在分支内延迟 await、Suspense 流式渲染;直接导入避免 barrel 文件、用 next/dynamic 动态导入、延迟加载第三方脚本;用 React.cache 做请求内去重、LRU 跨请求缓存、最小化传给客户端组件的数据、用 after() 处理非阻塞操作;用 SWR 去重请求、React 19 的 useActionState/useFormStatus/useOptimistic;用派生状态、函数式 setState、startTransition、useDeferredValue 等减少重渲染;以及 content-visibility、资源提示、combine 迭代、Set/Map 查找等。
使用方式:每条规则以单独文件存放,如 rules/async-parallel.md、rules/bundle-barrel-imports.md,包含原因说明、错误示例与正确示例及补充参考。完整合集见 AGENTS.md。
限制:资料未提供安装命令、平台支持范围、收费信息或实测效果数据,这些暂未提供。