用途:在编写新的 React 组件或 Next.js 页面、实现数据获取(客户端或服务端)、审查性能问题、重构已有 React/Next.js 代码,以及优化打包体积或加载时间时参考。
主要能力:提供覆盖 8 个类别的 40+ 条性能规则,按影响优先级排序:1 消除瀑布流(CRITICAL),2 打包体积优化(CRITICAL),3 服务端性能(HIGH),4 客户端数据获取(MEDIUM-HIGH),5 重渲染优化(MEDIUM),6 渲染性能(MEDIUM),7 JavaScript 性能(LOW-MEDIUM),8 高级模式(LOW)。
关键模式示例:消除瀑布流方面包括延迟 await 至需要时、用 Promise.all() 并行独立异步操作、尽早启动 promise 并延迟 await、使用 better-all 处理部分依赖、用 Suspense 边界流式输出;打包体积方面包括避免 barrel 文件导入、对重型组件用 next/dynamic、推迟非关键第三方库、按用户意图预加载;服务端方面包括用 React.cache() 做每请求去重、用 LRU 缓存做跨请求缓存、减少 RSC 边界序列化、以组件组合并行获取数据;客户端方面包括用 SWR 自动去重请求、延迟读取状态、惰性初始化昂贵状态、派生状态订阅、用 startTransition 处理非紧急更新;渲染方面包括对 SVG 包装元素而非 SVG 元素本身做动画、对长列表用 content-visibility: auto、用内联脚本避免 hydration 不匹配、显式三元条件渲染;JavaScript 方面包括用 class 批量修改 DOM CSS、为重复查找构建索引映射、缓存重复函数调用、用 toSorted() 替代 sort()、数组比较前先做长度检查。
使用方式:规则与示例位于 references/react-performance-guidelines.md 以及 references/rules/ 下按类别组织的规则文件。可按关键词检索,例如: grep -l "suspense" references/rules/ grep -l "barrel" references/rules/ grep -l "swr" references/rules/
限制:资料未提供安装命令、收费、平台与效果数据;具体用法与完整 API 需查阅上述参考文件。