SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-15 21:10

技能介绍

用途:该技能提供 React 与 Next.js 应用的性能优化指南,适用于编写新组件或页面、实现数据获取、审查性能问题、重构现有代码以及优化打包体积与加载时间等场景。

主要能力:包含 69 条规则,按影响优先级分为 8 类。1. 消除瀑布流(CRITICAL,async- 前缀),如 async-parallel 使用 Promise.all() 处理独立操作、async-defer-await 将 await 移入实际使用的分支。2. 打包体积优化(CRITICAL,bundle- 前缀),如 bundle-barrel-imports 直接导入避免 barrel 文件、bundle-dynamic-imports 用 next/dynamic 加载重型组件。3. 服务端性能(HIGH,server- 前缀),如 server-cache-react 用 React.cache() 做请求级去重、server-serialization 减少传给客户端组件的数据。4. 客户端数据获取(MEDIUM-HIGH,client- 前缀),如 client-swr-dedup 用 SWR 自动去重请求。5. 重渲染优化(MEDIUM,rerender- 前缀),如 rerender-memo 提取昂贵计算到记忆化组件、rerender-transitions 用 startTransition 处理非紧急更新。6. 渲染性能(MEDIUM,rendering- 前缀),如 rendering-content-visibility 用于长列表、rendering-conditional-render 用三元而非 &&。7. JavaScript 性能(LOW-MEDIUM,js- 前缀),如 js-index-maps 构建 Map 加速重复查找、js-early-exit 提前返回。8. 高级模式(LOW,advanced- 前缀),如 advanced-init-once 每次应用加载仅初始化一次。

使用方式:可阅读各规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md)获取详细说明与代码示例,每个规则文件包含原因说明、错误示例、正确示例及补充参考。完整指南见 AGENTS.md。

限制:资料未提供安装命令、收费信息或具体平台支持细节,暂未提供。