用途:这是一份面向 React 与 Next.js 应用的性能优化指南,按影响优先级整理 8 大类共 57 条规则,用于指导自动化重构与代码生成,也适合在审查现有代码时逐条对照。
主要能力(按优先级与类别前缀):
- 消除瀑布流(CRITICAL,前缀 async-):如 async-parallel 独立操作使用 Promise.all()、async-defer-await 将 await 移入实际分支、async-suspense-boundaries 用 Suspense 流式输出等。
- 打包体积优化(CRITICAL,前缀 bundle-):如 bundle-barrel-imports 直接导入避免 barrel 文件、bundle-dynamic-imports 用 next/dynamic 延迟重组件、bundle-defer-third-party 水合后再加载分析/日志。
- 服务端性能(HIGH,前缀 server-):如 server-cache-react 用 React.cache() 做请求内去重、server-serialization 减少传给客户端组件的数据、server-after-nonblocking 用 after() 处理非阻塞操作。
- 客户端数据获取(MEDIUM-HIGH,前缀 client-):如 client-swr-dedup 用 SWR 自动请求去重、client-passive-event-listeners 滚动使用被动监听。
- 重渲染优化(MEDIUM,前缀 rerender-):含 memo 化、派生状态、函数式 setState、useRef 存瞬时值、startTransition 等。
- 渲染性能(MEDIUM,前缀 rendering-):如 content-visibility 长列表、提升静态 JSX、usetransition 加载态等。
- JavaScript 性能(LOW-MEDIUM,前缀 js-):如用 Set/Map 做查找、合并迭代、循环外提升正则等。
- 高级模式(LOW,前缀 advanced-):事件处理器存入 ref、useLatest 等。
使用方式:在编写新的 React 组件或 Next.js 页面、实现数据获取、审查性能问题、重构已有代码或优化打包体积与加载时间时参考。可阅读单条规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md),每条含原因说明、错误示例、正确示例与补充参考;完整展开版见 references/full-guide.md。
适用场景:React/Next.js 组件的性能审查、重构、代码生成辅助。
限制:资料未提供该技能的具体安装命令、收费情况、支持的版本范围与效果数据,暂未提供。