用途:面向 React 与 Next.js 应用的性能优化指南,由 Vercel 工程团队维护,共 45 条规则、8 个类别,按影响程度排序,可用于编写新代码、审查性能问题、重构现有代码以及优化打包体积与加载时间。
主要能力:规则按优先级分为八类,并带前缀标识。关键级包括消除瀑布流(async-,如将 await 移入实际使用的分支、用 Promise.all() 处理独立操作、在 API 路由中提前启动 Promise 并延迟 await、用 Suspense 流式输出)与打包体积优化(bundle-,如直接导入避免 barrel 文件、用 next/dynamic 加载重型组件、在水合后再加载分析与日志、按需加载模块、悬停或聚焦时预加载)。高优先级为服务端性能(server-,如 React.cache() 做请求内去重、LRU 缓存跨请求缓存、减少传给客户端组件的数据、并行获取数据、用 after() 执行非阻塞操作)。中高为客户端数据获取(client-,如 SWR 自动去重请求、去重全局事件监听)。中等包括重渲染优化(rerender-,如避免订阅仅回调使用的状态、memo 化昂贵计算、用原始值依赖、订阅派生布尔值、函数式 setState、惰性初始化 state、startTransition 处理非紧急更新)、渲染性能(rendering-,如动画作用于 div 包裹层而非 SVG、长列表用 content-visibility、提取静态 JSX、降低 SVG 坐标精度、用内联脚本避免客户端数据闪烁、用 Activity 组件控制显示隐藏、条件渲染用三元而非 &&)以及 JavaScript 性能(js-,如批量处理 DOM CSS 变更、构建索引 Map、循环中缓存属性访问、模块级 Map 缓存函数结果、缓存 localStorage/sessionStorage 读取、合并多次 filter/map、先检查数组长度、提前返回、将正则提升到循环外、用循环取极值而非排序、用 Set/Map 做 O(1) 查找、用 toSorted() 保持不可变)。低优先级为高级模式(advanced-,如用 ref 保存事件处理器、useLatest 保持回调 ref 稳定)。
使用方式:可查阅单条规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md),每条规则包含原因说明、错误代码示例、正确代码示例与补充说明;完整汇总文档见 AGENTS.md。
适用场景:新写 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查性能问题、重构 React/Next.js 代码、优化打包体积或加载时间。
限制:资料未提供具体安装命令、授权方式、价格或运行环境要求,暂未提供。