用途:为 React 与 Next.js 应用提供性能优化规则,供编写组件、实现数据获取、审查性能问题、重构代码、优化包体积与加载时间时参考。
主要能力:按优先级分为 8 类共 45 条规则。1 消除瀑布流(CRITICAL,async-):延迟 await、Promise.all 并行、处理部分依赖、API 路由提前启动 Promise、用 Suspense 流式输出。2 包体积优化(CRITICAL,bundle-):直接导入避免 barrel 文件、next/dynamic 动态导入、水合后再加载第三方、按需加载模块、悬停预加载。3 服务端性能(HIGH,server-):React.cache() 请求内去重、LRU 跨请求缓存、减少传给客户端组件的数据、并行获取、after() 非阻塞操作。4 客户端数据获取(MEDIUM-HIGH,client-):SWR 自动去重、去重全局事件监听。5 重渲染优化(MEDIUM,rerender-):延迟订阅、memo 提取昂贵计算、原始类型依赖、派生布尔订阅、函数式 setState、惰性初始化、startTransition。6 渲染性能(MEDIUM,rendering-):动画包裹 div、content-visibility、提升静态 JSX、降低 SVG 精度、内联脚本防闪烁、Activity 组件、三元而非 &&。7 JavaScript 性能(LOW-MEDIUM,js-):批量 DOM/CSS、索引 Map、缓存属性与函数结果、缓存存储读取、合并迭代、先查长度、提前返回、提升正则、循环求最值、Set/Map 查找、toSorted()。8 高级模式(LOW,advanced-):ref 存事件处理器、useLatest。
使用方式:阅读各规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md),每条含原因说明、错误与正确代码示例及参考;完整指南见 AGENTS.md。
适用场景:React/Next.js 组件与页面开发、数据获取实现、性能审查与重构、包体积与加载优化。
限制:资料未提供安装命令、收费、平台与效果数据,暂未提供。