wehub-skill-sync
7.4 KiB
7.4 KiB
name, description, license, metadata
| name | description | license | metadata | ||||
|---|---|---|---|---|---|---|---|
| vercel-react-best-practices | Vercel 工程团队出品的 React 和 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码时应使用此技能，以确保遵循最优性能模式。当任务涉及 React 组件、Next.js 页面、数据获取、打包优化或性能改进时触发。 | MIT |
|
Vercel React 最佳实践
由 Vercel 维护的 React 与 Next.js 应用综合性能优化指南。包含 8 个类别共 70 条规则，按影响优先级排序，用于指导自动化重构与代码生成。
何时应用
在以下场景中参考这些指南：
- 编写新的 React 组件或 Next.js 页面
- 实现数据获取（客户端或服务端）
- 审查代码中的性能问题
- 重构现有的 React/Next.js 代码
- 优化打包体积或加载时间
按优先级排列的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布请求 | 致命 | async- |
| 2 | 打包体积优化 | 致命 | bundle- |
| 3 | 服务端性能 | 高 | server- |
| 4 | 客户端数据获取 | 中高 | client- |
| 5 | 重渲染优化 | 中 | rerender- |
| 6 | 渲染性能 | 中 | rendering- |
| 7 | JavaScript 性能 | 低中 | js- |
| 8 | 高级模式 | 低 | advanced- |
快速参考
1. 消除瀑布请求（致命）
async-cheap-condition-before-await—— 在等待标记或远程值之前，先检查廉价的同步条件async-defer-await—— 将 await 移到实际使用它的分支中async-parallel—— 对独立操作使用 Promise.all()async-dependencies—— 对部分依赖使用 better-allasync-api-routes—— 在 API 路由中尽早启动 promise，尽可能晚地 awaitasync-suspense-boundaries—— 使用 Suspense 实现内容流式传输
2. 打包体积优化（致命）
bundle-barrel-imports—— 直接导入，避免使用 barrel 文件bundle-analyzable-paths—— 优先使用可静态分析的导入路径和文件系统路径，避免产生过大的打包与追踪范围bundle-dynamic-imports—— 对重型组件使用 next/dynamicbundle-defer-third-party—— 在 hydration 之后加载分析/日志库bundle-conditional—— 仅在功能被激活时加载模块bundle-preload—— 在悬停/聚焦时预加载，提升感知速度
3. 服务端性能（高）
server-auth-actions—— 像保护 API 路由一样认证服务端动作server-cache-react—— 使用 React.cache() 实现单次请求的去重server-cache-lru—— 使用 LRU 缓存实现跨请求缓存server-dedup-props—— 避免在 RSC props 中重复序列化server-hoist-static-io—— 将静态 I/O（字体、Logo）提升到模块级别server-no-shared-module-state—— 避免在 RSC/SSR 中使用模块级别的可变请求状态server-serialization—— 最小化传递给客户端组件的数据server-parallel-fetching—— 重构组件以并行化数据获取server-parallel-nested-fetching—— 在 Promise.all 中对每个条目链式嵌套获取server-after-nonblocking—— 使用 after() 处理非阻塞操作
4. 客户端数据获取（中高）
client-swr-dedup—— 使用 SWR 实现自动请求去重client-event-listeners—— 对全局事件监听器去重client-passive-event-listeners—— 对滚动事件使用 passive 监听器client-localstorage-schema—— 对 localStorage 数据进行版本控制并最小化
5. 重渲染优化（中）
rerender-defer-reads—— 不要订阅仅在回调中使用的状态rerender-memo—— 将昂贵的工作提取到已记忆化的组件中rerender-memo-with-default-value—— 提升默认的非原始值 propsrerender-dependencies—— 在 effect 中使用原始类型的依赖项rerender-derived-state—— 订阅派生后的布尔值，而非原始值rerender-derived-state-no-effect—— 在渲染期间派生状态，而不是在 effect 中rerender-functional-setstate—— 使用函数式 setState 以获得稳定的回调rerender-lazy-state-init—— 对昂贵的初始值向 useState 传入函数rerender-simple-expression-in-memo—— 对简单的原始值避免使用 memorerender-split-combined-hooks—— 拆分具有独立依赖项的 hooksrerender-move-effect-to-event—— 将交互逻辑放在事件处理程序中rerender-transitions—— 对非紧急更新使用 startTransitionrerender-use-deferred-value—— 延迟昂贵的渲染以保持输入响应rerender-use-ref-transient-values—— 对频繁变化的临时值使用 refrerender-no-inline-components—— 不要在组件内部定义组件
6. 渲染性能（中）
rendering-animate-svg-wrapper—— 动画化 div 包装器，而非 SVG 元素本身rendering-content-visibility—— 对长列表使用 content-visibilityrendering-hoist-jsx—— 将静态 JSX 提取到组件外部rendering-svg-precision—— 降低 SVG 坐标精度rendering-hydration-no-flicker—— 对仅客户端数据使用内联脚本rendering-hydration-suppress-warning—— 抑制预期的不匹配警告rendering-activity—— 使用 Activity 组件控制显示/隐藏rendering-conditional-render—— 使用三元运算符而非 && 进行条件渲染rendering-usetransition-loading—— 优先使用 useTransition 处理加载状态rendering-resource-hints—— 使用 React DOM 资源提示进行预加载rendering-script-defer-async—— 对 script 标签使用 defer 或 async
7. JavaScript 性能（低中）
js-batch-dom-css—— 通过 class 或 cssText 批量分组 CSS 变更js-index-maps—— 对重复查找操作构建 Mapjs-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() 保证不可变性js-flatmap-filter—— 使用 flatMap 在一次遍历中同时完成映射和过滤js-request-idle-callback—— 将非关键工作延迟到浏览器空闲时段
8. 高级模式（低）
advanced-effect-event-deps—— 不要将useEffectEvent的结果放入 effect 依赖中advanced-event-handler-refs—— 将事件处理程序存储在 ref 中advanced-init-once—— 每次应用加载只初始化一次advanced-use-latest—— 使用 useLatest 获得稳定的回调引用
如何使用
阅读各条规则的说明文件以获取详细解释和代码示例：
rules/async-parallel.md
rules/bundle-barrel-imports.md
每条规则文件包含：
- 该规则为何重要的简要说明
- 带解释的错误代码示例
- 带解释的正确代码示例
- 额外的上下文和参考资料
完整编译文档
如需查看包含所有规则详情的完整指南：AGENTS.md