用途:这是一套 React 与 Next.js 应用性能优化指南,适用于编写新组件或页面、实现客户端或服务端数据获取、审查性能问题、重构既有代码以及优化包体积与加载时间。
主要能力:按影响优先级分为 8 类共 62 条规则,每类有前缀标识。第一类消除瀑布流(async-,CRITICAL),含将 await 移入实际使用的分支、独立操作使用 Promise.all()、部分依赖使用 better-all、API 路由中提前启动 Promise 延后 await、用 Suspense 流式输出内容。第二类包体积优化(bundle-,CRITICAL),含直接导入避免 barrel 文件、重型组件用 next/dynamic、分析日志在 hydration 后加载、按功能激活才加载模块、悬停或聚焦预加载。第三类服务端性能(server-,HIGH),含像 API 路由一样校验服务端操作、用 React.cache() 做单请求去重、用 LRU 缓存做跨请求缓存、避免 RSC props 重复序列化、将静态 I/O(字体、Logo)提升到模块级、减少传给客户端组件的数据、重构组件并行获取、用 after() 处理非阻塞操作。第四类客户端数据获取(client-,MEDIUM-HIGH),含用 SWR 自动去重请求、去重全局事件监听、滚动用被动监听、localStorage 数据版本化并精简。第五类重渲染优化(rerender-,MEDIUM)与第六类渲染性能(rendering-,MEDIUM)各含多条规则,涉及 memo、派生状态、函数式 setState、惰性初始化、startTransition、refs、避免组件内定义组件,以及 SVG 包装动画、content-visibility、hoist JSX、hydration、资源提示等。第七类 JavaScript 性能(js-,LOW-MEDIUM)涉及批量 DOM CSS、索引 Map、缓存属性与函数结果、合并迭代、提前返回、提升正则、用 Set/Map 查找、toSorted()、flatMap 等。第八类高级模式(advanced-,LOW)含事件处理器存入 refs、应用每次加载初始化一次、useLatest 稳定回调 ref。
使用方式:规则以文件形式组织,可阅读单个规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md),每个文件包含原因说明、错误代码示例与说明、正确代码示例与说明及补充背景与参考。完整展开全部规则的文档见 AGENTS.md。
适用场景:React/Next.js 项目的日常开发与代码评审、性能专项优化、自动化重构与代码生成。限制:本资料未提供安装命令、收费方式与运行平台信息。