SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 01:49

技能介绍

用途:这是一套 React 与 Next.js 应用的性能优化指南,由 Vercel 维护,包含 8 个类别、共 45 条规则,并按影响程度排序,用于指导自动化重构和代码生成。

适用时机:编写新的 React 组件或 Next.js 页面时;实现客户端或服务端数据获取时;审查代码中的性能问题时;重构既有 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- 类涵盖将 await 移入实际分支、用 Promise.all() 处理独立操作、用 better-all 处理部分依赖、API 路由中早启动晚等待、用 Suspense 流式输出;bundle- 类涵盖避免 barrel 文件直接导入、用 next/dynamic 加载重组件、第三方脚本延后加载、按条件加载模块、悬停/聚焦预加载;server- 类涵盖用 React.cache() 做请求内去重、LRU 跨请求缓存、减少传给客户端组件的数据、并行化服务端获取、用 after() 处理非阻塞操作;client- 类含用 SWR 去重、全局事件监听去重;rerender- 类含延迟读取、memo 化昂贵计算、使用原始依赖、订阅派生布尔值、函数式 setState、惰性 state 初始化、startTransition;rendering- 类含动画包装元素、content-visibility、提升静态 JSX、降低 SVG 精度、避免 hydration 闪烁、Activity 组件、条件渲染用三元;js- 类含批量 DOM/CSS、索引 Map、缓存属性访问与函数结果与存储读取、合并迭代、提前返回、提升正则、用循环求最值、Set/Map 查找、toSorted();advanced- 类含事件处理器 ref、useLatest。

使用方式:可按需阅读单个规则文件,例如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md;每个规则文件包含原因简述、错误代码示例及说明、正确代码示例及说明、补充背景与参考。完整展开的指南见 AGENTS.md。

限制:资料未提供安装命令、价格或使用平台等信息;上述内容仅为规则清单与用法说明,具体实现细节需查阅对应规则文件。