用途:该技能面向 React 与 Next.js 应用的性能优化,由 Vercel 工程团队维护,包含 45 条规则、分为 8 个类别,并按影响程度排序,用于指导自动化重构与代码生成。
适用时机:编写新的 React 组件或 Next.js 页面、实现数据获取(客户端或服务端)、审查代码性能问题、重构既有 React/Next.js 代码、优化打包体积或加载时间时参考。
主要能力按优先级分为八类:消除瀑布流(CRITICAL,async- 前缀,如将 await 移入实际使用的分支、用 Promise.all() 处理独立操作、使用 Suspense 流式渲染);打包体积优化(CRITICAL,bundle- 前缀,如避免 barrel 文件、用 next/dynamic 加载重组件、延迟加载第三方脚本);服务端性能(HIGH,server- 前缀,如用 React.cache() 做请求内去重、用 LRU 做跨请求缓存、减少传给客户端组件的数据);客户端数据获取(MEDIUM-HIGH,client- 前缀,如用 SWR 自动去重请求);重渲染优化(MEDIUM,rerender- 前缀);渲染性能(MEDIUM,rendering- 前缀);JavaScript 性能(LOW-MEDIUM,js- 前缀);高级模式(LOW,advanced- 前缀)。
使用方式:阅读各规则文件获取详细说明与代码示例,如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md;每个规则文件包含原因说明、错误代码示例与说明、正确代码示例与说明及补充参考。完整指南见 AGENTS.md。
限制:资料未提供该技能的安装命令、收费与价格、支持平台等信息。