用途:该项目是 Vercel 维护的 React 与 Next.js 性能优化指南,包含 8 个类别、共 57 条规则,按影响力排序,用于指导自动重构和代码生成。适用于编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查代码性能问题、重构既有 React/Next.js 代码,以及优化打包体积或加载时间。
主要能力(按优先级):1. 消除瀑布流(CRITICAL,前缀 async-),如 async-defer-await、async-parallel、async-dependencies、async-api-routes、async-suspense-boundaries。2. 打包体积优化(CRITICAL,bundle-),如直接导入避免 barrel 文件、next/dynamic 动态导入、延迟第三方脚本、按需加载模块、悬停预加载。3. 服务端性能(HIGH,server-),如服务端操作鉴权、React.cache() 请求内去重、LRU 跨请求缓存、减少传给客户端组件的序列化数据、并行获取、after() 非阻塞操作。4. 客户端数据获取(MEDIUM-HIGH,client-),如 SWR 自动去重、事件监听器去重、被动监听器、localStorage 数据版本化。5. 重渲染优化(MEDIUM,rerender-),如状态订阅拆分、memo 提取、effect 使用原始类型依赖、派生状态在渲染期计算、函数式 setState、startTransition 与 ref 存放瞬时值。6. 渲染性能(MEDIUM,rendering-),如动画包裹 div、content-visibility、静态 JSX 提升、减少 SVG 精度、避免 hydration 闪烁、条件渲染用三元而非 &&。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;每个规则文件包含理由、错误代码示例、正确代码示例及补充参考。完整指南见 AGENTS.md。
限制:资料未提供安装命令、收费方式、平台要求或具体效果数据,亦未说明规则的适用版本范围,上述信息暂未提供。