mcpField
V
vercel-react-best-practices

vercel-react-best-practices

github.com/davila7开发33.0k376 次安装1 天前更新
代码仓库

关于 vercel-react-best-practices

由 Vercel 维护的 React 和 Next.js 性能指南，面向开发者。指南将 45 条规则划分为八个优先级类别，用于编写、审查和重构应用代码。

主要功能

  1. 0145 条性能规则
  2. 02八个优先级类别
  3. 03减少请求瀑布的建议
  4. 04优化代码包大小的建议
  5. 05服务端与客户端性能规则
  6. 06含代码示例的规则文件

适用场景

  1. 01审查 React 性能
  2. 02重构 Next.js 页面
  3. 03优化数据获取
  4. 04缩减代码包大小

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/davila7/claude-code-templates --skill vercel-react-best-practices

安装后在 Claude Code 中输入/vercel-react-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
advanced-event-handler-refs.md
advanced-use-latest.md
async-api-routes.md
async-defer-await.md
async-dependencies.md
async-parallel.md
async-suspense-boundaries.md
bundle-barrel-imports.md
bundle-conditional.md
bundle-defer-third-party.md
bundle-dynamic-imports.md
bundle-preload.md
client-event-listeners.md
client-swr-dedup.md
js-batch-dom-css.md
js-cache-function-results.md
js-cache-property-access.md
js-cache-storage.md
js-combine-iterations.md
js-early-exit.md
js-hoist-regexp.md
js-index-maps.md
js-length-check-first.md
js-min-max-loop.md
js-set-map-lookups.md

详细介绍

Vercel React 最佳实践

面向 React 和 Next.js 应用的综合性能优化指南，由 Vercel 维护。包含 8 个类别中的 45 条规则，并按影响程度排序，为自动重构和代码生成提供指导。

适用场景

在以下情况下参考这些指南：

  • 编写新的 React 组件或 Next.js 页面
  • 实现数据获取（客户端或服务端）
  • 审查代码中的性能问题
  • 重构现有的 React/Next.js 代码
  • 优化包体积或加载时间

按优先级划分的规则类别

优先级类别影响前缀
1消除瀑布流CRITICALasync-
2优化包体积CRITICALbundle-
3服务端性能HIGHserver-
4客户端数据获取MEDIUM-HIGHclient-
5优化重新渲染MEDIUMrerender-
6渲染性能MEDIUMrendering-
7JavaScript 性能LOW-MEDIUMjs-
8高级模式LOWadvanced-

快速参考

1. 消除瀑布流（CRITICAL）
  • async-defer-await - 将 await 移至实际使用它的分支中
  • async-parallel - 使用 Promise.all() 并行执行独立操作
  • async-dependencies - 使用 better-all 处理部分依赖
  • async-api-routes - 在 API 路由中尽早启动 Promise，延后等待结果
  • async-suspense-boundaries - 使用 Suspense 流式传输内容
2. 优化包体积（CRITICAL）
  • bundle-barrel-imports - 直接导入，避免使用聚合导出文件
  • bundle-dynamic-imports - 对大型组件使用 next/dynamic
  • bundle-defer-third-party - 在 hydration 后加载分析/日志工具
  • bundle-conditional - 仅在功能启用时加载模块
  • bundle-preload - 在悬停/聚焦时预加载，提升感知速度
3. 服务端性能（HIGH）
  • server-cache-react - 使用 React.cache() 在单次请求内去重
  • server-cache-lru - 使用 LRU 缓存实现跨请求缓存
  • server-serialization - 尽量减少传递给客户端组件的数据
  • server-parallel-fetching - 调整组件结构以并行获取数据
  • server-after-nonblocking - 使用 after() 执行非阻塞操作
4. 客户端数据获取（MEDIUM-HIGH）
  • client-swr-dedup - 使用 SWR 自动去重请求
  • client-event-listeners - 对全局事件监听器去重
5. 优化重新渲染（MEDIUM）
  • rerender-defer-reads - 不要订阅仅在回调中使用的状态
  • rerender-memo - 将开销大的操作提取到经过记忆化的组件中
  • rerender-dependencies - 在 effect 中使用原始类型作为依赖项
  • rerender-derived-state - 订阅派生布尔值，而不是原始值
  • rerender-functional-setstate - 使用函数式 setState，确保回调稳定
  • rerender-lazy-state-init - 对开销大的值，将函数传递给 useState
  • rerender-transitions - 对非紧急更新使用 startTransition
6. 渲染性能（MEDIUM）
  • rendering-animate-svg-wrapper - 对 div 包装元素应用动画，而不是 SVG 元素
  • rendering-content-visibility - 对长列表使用 content-visibility
  • rendering-hoist-jsx - 将静态 JSX 提取到组件外部
  • rendering-svg-precision - 降低 SVG 坐标精度
  • rendering-hydration-no-flicker - 使用内联脚本处理仅客户端数据
  • rendering-activity - 使用 Activity 组件控制显示/隐藏
  • rendering-conditional-render - 条件渲染使用三元运算符，而不是 &&
7. JavaScript 性能（低至中）
  • js-batch-dom-css - 通过类或 cssText 批量处理 CSS 变更
  • js-index-maps - 为重复查找构建 Map
  • js-cache-property-access - 在循环中缓存对象属性
  • js-cache-function-results - 在模块级 Map 中缓存函数结果
  • js-cache-storage - 缓存 localStorage/sessionStorage 读取结果
  • js-combine-iterations - 将多个 filter/map 合并到一个循环中
  • js-length-check-first - 在执行昂贵的比较之前检查数组长度
  • js-early-exit - 在函数中提前返回
  • js-hoist-regexp - 将 RegExp 的创建移到循环外
  • js-min-max-loop - 使用循环而非排序来查找最小值/最大值
  • js-set-map-lookups - 使用 Set/Map 实现 O(1) 查找
  • js-tosorted-immutable - 使用 toSorted() 保持不可变性
8. 高级模式（低）
  • advanced-event-handler-refs - 在 ref 中存储事件处理程序
  • advanced-use-latest - 使用 useLatest 实现稳定的回调 ref

使用方法

阅读各个规则文件，了解详细说明和代码示例：

rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/_sections.md

每个规则文件都包含：

  • 简要说明其重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 补充背景信息和参考资料

完整编译文档

如需查看包含所有规则完整内容的指南：AGENTS.md

评论

支持 Markdown