SuperAPI AI 工具集

react-nextjs

前端与建站

查看项目

更新于 10-15 23:45

技能介绍

用途:为 React 与 Next.js 应用提供性能优化规则,供编写组件、实现数据获取、审查性能问题、重构代码及优化包体积与加载时间时参考。

主要能力:按优先级分为 8 类共 45 条规则。关键级包括消除瀑布流(async- 前缀,如 async-parallel 用 Promise.all、async-defer-await 延迟 await、async-suspense-boundaries 用 Suspense 流式输出)与包体积优化(bundle- 前缀,如避免 barrel 文件、用 next/dynamic 动态导入、延迟第三方脚本、按需加载、悬停预加载)。高优先级为服务端性能(server- 前缀,如 React.cache() 请求内去重、LRU 跨请求缓存、减少传给客户端组件的数据、并行获取、after() 非阻塞操作)。中高为客户端数据获取(client- 前缀,如 SWR 去重、全局事件监听去重)。中为重新渲染优化(rerender- 前缀,如延迟订阅、memo 化、原始类型依赖、派生布尔订阅、函数式 setState、惰性初始化、startTransition)与渲染性能(rendering- 前缀,如动画包裹层、content-visibility、提升静态 JSX、降低 SVG 精度、避免水合闪烁、Activity 组件、三元而非 &&)。低中为 JavaScript 性能(js- 前缀,如批量 DOM/CSS 修改、索引 Map、缓存属性与函数结果、缓存存储读取、合并迭代、先查长度、提前返回、提升正则、循环求最值、Set/Map 查找、toSorted 不可变)。低为高级模式(advanced- 前缀,如事件处理器存 ref、useLatest)。

使用方式:查阅 rules/ 目录下各规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md),每条含原因说明、错误示例、正确示例与参考;完整指南见 AGENTS.md。

适用场景:React/Next.js 组件与页面开发、数据获取实现、性能审查与重构、包体积与加载优化。

限制:资料未提供安装命令、收费、平台与效果数据,暂未提供。