SuperAPI AI 工具集

vercel-react-best-practices

编程与开发

查看项目

更新于 10-16 09:30

技能介绍

用途:这是面向 React 与 Next.js 应用的性能优化指南,由 Vercel 维护,包含 8 个类别共 57 条规则,按影响程度排序,用于指导自动化重构与代码生成。适用时机:编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查代码性能问题、重构现有代码、优化打包体积或加载时间。

规则类别与优先级:1. 消除瀑布流(CRITICAL,前缀 async-);2. 打包体积优化(CRITICAL,bundle-);3. 服务端性能(HIGH,server-);4. 客户端数据获取(MEDIUM-HIGH,client-);5. 减少重渲染(MEDIUM,rerender-);6. 渲染性能(MEDIUM,rendering-);7. JavaScript 性能(LOW-MEDIUM,js-);8. 高级模式(LOW,advanced-)。

代表规则示例:async-parallel 使用 Promise.all() 处理独立操作,async-suspense-boundaries 用 Suspense 流式输出,async-api-routes 在 API 路由中提前启动 Promise、延后 await;bundle-barrel-imports 直接导入并避免 barrel 文件,bundle-dynamic-imports 用 next/dynamic 加载重型组件;server-cache-react 用 React.cache() 做请求内去重,server-cache-lru 用 LRU 做跨请求缓存,server-after-nonblocking 用 after() 处理非阻塞操作;client-swr-dedup 用 SWR 自动去重请求,client-passive-event-listeners 为滚动使用被动监听;rerender-memo 将昂贵计算抽到记忆化组件,rerender-transitions 用 startTransition 处理非紧急更新;rendering-content-visibility 对长列表使用 content-visibility,rendering-conditional-render 用三元而非 && 做条件渲染;js-set-map-lookups 用 Set/Map 实现 O(1) 查找,js-early-exit 提前返回。

使用方式:逐个阅读规则文件获取详细说明与代码示例,如 rules/async-parallel.md、rules/bundle-barrel-imports.md;每条规则文件包含重要性简述、错误示例及说明、正确示例及说明、补充背景与参考。完整版指南见 AGENTS.md。

限制:资料未提供安装命令、平台限制、收费与价格信息,暂未提供。