用途:该技能提供 Vercel 维护的 React 与 Next.js 性能优化指南,适用于编写新组件或页面、实现数据获取、审查性能问题、重构现有代码以及优化打包体积与加载时间。
主要能力:包含 8 个类别、64 条规则,按影响优先级排列。1 消除瀑布流(关键,async- 前缀):如 async-parallel 用 Promise.all() 处理独立操作、async-suspense-boundaries 用 Suspense 流式输出。2 打包体积优化(关键,bundle-):如避免 barrel 文件、用 next/dynamic 加载重组件、延迟第三方脚本。3 服务端性能(高,server-):如用 React.cache() 做请求级去重、LRU 跨请求缓存、减少传给客户端组件的数据。4 客户端数据获取(中高,client-):如用 SWR 自动去重、去重全局事件监听。5 重渲染优化(中,rerender-):如用 memo 提取昂贵计算、用函数式 setState、用 startTransition 处理非紧急更新。6 渲染性能(中,rendering-):如长列表用 content-visibility、静态 JSX 提取到组件外。7 JavaScript 性能(低中,js-):如用 Map/Set 做 O(1) 查找、循环外提升 RegExp。8 高级模式(低,advanced-):如用 ref 存储事件处理器、useLatest 稳定回调。
使用方式:每条规则有独立文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md),内含原因说明、错误与正确代码示例及参考;完整指南见 AGENTS.md。
限制:资料未提供安装命令、收费方式、平台支持或效果数据,暂未提供。