用途:为 React 与 Next.js 应用提供性能优化指南,包含 8 个类别、40 多条规则,规则按影响程度排序,可用于自动重构与代码生成参考。适用时机包括:编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、评审代码性能问题、重构既有 React/Next.js 代码、优化打包体积或加载时间。
主要能力(按优先级):1 消除瀑布流(CRITICAL):延迟 await 至需要时、独立异步操作用 Promise.all()、提前启动 Promise 延后 await、用 better-all 处理部分依赖、用 Suspense 边界流式输出;2 打包体积优化(CRITICAL):避免 barrel 文件导入、重型组件用 next/dynamic、延后非关键第三方库、按用户意图预加载;3 服务端性能(HIGH):React.cache() 请求内去重、LRU 跨请求缓存、减少 RSC 边界序列化、组件组合并行取数;4 客户端取数(MEDIUM-HIGH):SWR 自动去重、延迟状态读取、惰性状态初始化、派生状态订阅、startTransition;5 重渲染优化(MEDIUM);6 渲染性能(MEDIUM):对 SVG 包装层而非元素本身做动画、长列表用 content-visibility: auto、内联脚本避免水合不匹配、用显式三元而非 && 条件渲染;7 JavaScript 性能(LOW-MEDIUM):通过类批量改 DOM CSS、为重复查找建索引映射、缓存重复函数调用、用 toSorted() 保持不可变、数组比较前先比长度;8 高级模式(LOW)。
使用方式:完整文档与代码示例位于 references/react-performance-guidelines.md,各规则文件位于 references/rules/ 并按类别组织(async-、bundle-、server-、client-、rerender-、rendering-、js-、advanced-)。可用 grep 检索规则,例如:grep -l "suspense" references/rules/、grep -l "barrel" references/rules/、grep -l "swr" references/rules/。
限制:资料未提供该技能的安装方式、平台支持、收费与版本信息,暂未提供。