【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载导读本文基于 open-slide 仓库内嵌的.agents/skills/vercel-react-best-practices/技能规则库系统解析 Vercel Engineering 维护的 React/Next.js 性能优化知识体系。该规则库将性能优化工作拆解为 8 个按影响优先级排序的分类共约 70 条规则每条规则均提供错误与正确代码对照。读完本文你将掌握这套分类体系的结构、优先级依据、文件名前缀约定以及每个分类下的代表性优化手法可直接用于编写、审查与重构 React/Next.js 代码时的性能排查。一、规则库是什么面向 Agent 的性能优化知识体系该技能位于仓库的.agents/skills/vercel-react-best-practices/目录其元数据见 SKILL.md显示名称为vercel-react-best-practices作者为 Vercel版本 1.0.0采用 MIT 许可。它的定位非常明确——当编写、审查或重构 React/Next.js 代码时用于确保最优性能模式触发场景包括 React 组件、Next.js 页面、数据获取、bundle 优化与性能改进。该规则库由三部分构成rules/目录规则源文件其中_sections.md是分类索引即本文主体、_template.md是新建规则的模板其余 70 个文件为具体规则如async-parallel.md、bundle-barrel-imports.mdAGENTS.md由全部规则编译生成的完整文档含 8 大章节与全部代码示例README.md与metadata.json维护说明与文档元数据。根据 SKILL.md 的说明这份文档主要面向 Agent 和 LLM用于在自动化工作流中保持一致性的代码生成与重构人类开发者同样可以受益。二、8 大分类总览优先级、影响级别与文件名前缀_sections.md的核心作用是定义所有分类的标题、排序、影响级别与描述。其中一条关键约定是分类 ID括号内即规则文件的文件名前缀用于将规则文件分组。例如async-前缀的规则文件全部属于Eliminating Waterfalls分类。以下是 _sections.md 中定义的完整分类骨架顺序分类影响级别文件名前缀描述1Eliminating Waterfalls (async)CRITICALasync-瀑布流是第一大性能杀手每个顺序 await 都叠加完整的网络延迟消除瀑布流收益最大2Bundle Size Optimization (bundle)CRITICALbundle-减小初始 bundle 体积可改善 Time to Interactive 与 Largest Contentful Paint3Server-Side Performance (server)HIGHserver-优化服务端渲染与数据获取消除服务端瀑布流并降低响应时间4Client-Side Data Fetching (client)MEDIUM-HIGHclient-自动去重与高效数据获取模式减少冗余网络请求5Re-render Optimization (rerender)MEDIUMrerender-减少不必要的重渲染最小化浪费的计算并提升 UI 响应性6Rendering Performance (rendering)MEDIUMrendering-优化渲染过程减少浏览器需要做的工作7JavaScript Performance (js)LOW-MEDIUMjs-热点路径上的微优化累积起来可产生可观的提升8Advanced Patterns (advanced)LOWadvanced-针对特定场景、需要谨慎实现的高级模式从整体结构看分类排序遵循收益递减原则影响级别从 CRITICAL 逐级过渡到 LOW排名越靠前的分类投入同样的精力获得的性能收益越大。这也是 _sections.md 刻意设计排序的原因——它要指导自动化的重构与代码生成优先处理收益最高的问题。三、分类 1Eliminating Waterfallsasync-—— CRITICAL该分类的核心观点是瀑布流是 #1 性能杀手每个顺序 await 都会叠加完整的网络往返延迟消除瀑布流能带来最大的性能收益。SKILL.md 中列出了该分类的 6 条规则async-cheap-condition-before-await在 await 标志位或远程值之前先检查廉价的同步条件async-defer-await把 await 移入实际使用它的分支async-parallel对相互独立的操作使用Promise.all()async-dependencies对存在部分依赖的操作使用 better-all 最大化并行async-api-routes在 API 路由中尽早启动 promise、尽量晚 awaitasync-suspense-boundaries使用 Suspense 流式输出内容。以 async-parallel.md 为例顺序 await 会产生 3 次网络往返而并行执行只产生 1 次// Incorrect: 顺序执行3 次往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // Correct: 并行执行1 次往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])async-defer-await则强调把 await 移入实际使用它的分支避免阻塞不需要该数据的代码路径——例如当skipProcessing为真时函数应立即返回而不必等待fetchUserData。这一优化在被跳过的分支经常命中或被推迟的操作很昂贵时价值尤其突出。四、分类 2Bundle Size Optimizationbundle-—— CRITICAL该分类的观点是减小初始 bundle 体积能改善 Time to Interactive 与 Largest Contentful Paint。包含 6 条规则bundle-barrel-imports直接导入避免 barrel 文件bundle-analyzable-paths优先使用可静态分析的导入与文件系统路径避免产生宽泛的 bundle 与 tracebundle-dynamic-imports对重型组件使用next/dynamicbundle-defer-third-party在 hydration 之后再加载分析/日志类三方库bundle-conditional仅在功能激活时加载模块bundle-preload在 hover/focus 时预加载提升感知速度。bundle-barrel-imports是最具代表性的规则之一。Barrel 文件如index.js中的export * from ./module会一次性转发大量模块的导出。流行的图标与组件库的入口文件中可能有高达上万个 re-export导入它们需要 200-800ms同时拖慢开发速度与生产冷启动。需要特别注意的是tree-shaking 为何帮不上忙当库被标记为 external不打进 bundle时打包器无法优化它而为了开启 tree-shaking 将其打入 bundle又会因分析整个模块图而显著拖慢构建。在 Next.js 13.5 项目中推荐的做法是保持标准导入写法由构建器optimizePackageImports在编译期将其转换为直接导入从而保留 TypeScript 类型安全与编辑器自动补全// next.config.js 中声明需要优化的包 experimental: { optimizePackageImports: [lucide-react, mui/material] } // 组件中保持标准导入写法构建期自动转成直接导入 import { Check, X, Menu } from lucide-react非 Next.js 项目则建议直接深度导入import Button from mui/material/Button。文中同时给出了类型安全警示部分库如lucide-react不为深度导入路径提供.d.ts文件在strict或noImplicitAny下会解析为隐式any应优先使用optimizePackageImports或先验证库的路径导出。五、分类 3Server-Side Performanceserver-—— HIGH该分类聚焦服务端渲染与数据获取目标是消除服务端瀑布流并降低响应时间。包含 10 条规则server-auth-actions像 API 路由一样对 Server Actions 做鉴权server-cache-react用React.cache()做单请求内去重server-cache-lru用 LRU 缓存做跨请求缓存server-dedup-props避免 RSC props 中的重复序列化server-hoist-static-io将字体、Logo 等静态 I/O 提升到模块级别server-no-shared-module-state避免在 RSC/SSR 中使用模块级可变请求状态server-serialization最小化传给客户端组件的数据server-parallel-fetching重构组件结构以并行化请求server-parallel-nested-fetching在Promise.all中按条目链式执行嵌套请求server-after-nonblocking用after()执行非阻塞操作。server-auth-actions强调Server Actionsuse server函数与 API 路由一样是公开端点必须在每个 Action 内部校验身份与授权不能只依赖 middleware 或页面级守卫。规范代码会在内部先verifySession()再做角色/资源归属校验最后才执行数据库变更并配合 Zod 等工具先校验输入。server-cache-react展示了React.cache()的用法与一个关键陷阱——缓存命中采用浅比较Object.is因此内联对象参数每次都会产生新引用导致永远无法命中缓存import { cache } from react export const getCurrentUser cache(async () { const session await auth() if (!session?.user?.id) return null return await db.user.findUnique({ where: { id: session.user.id } }) }) // 错误每次调用创建新对象永远缓存未命中 getUser({ uid: 1 }) getUser({ uid: 1 }) // Cache miss // 正确传入同一引用第二次命中缓存 const params { uid: 1 } getUser(params) // Query runs getUser(params) // Cache hitserver-cache-lru则补充了跨请求场景React.cache()只在单请求内生效用户连续点击 A、B 按钮这类跨请求共享数据应使用lru-cache如max: 1000, ttl: 5 * 60 * 1000实现跨请求缓存。六、分类 4Client-Side Data Fetchingclient-—— MEDIUM-HIGH该分类通过自动去重与高效数据获取模式减少冗余网络请求。包含 4 条规则client-swr-dedup用 SWR 实现请求自动去重client-event-listeners去重全局事件监听器client-passive-event-listeners滚动监听使用 passive 模式client-localstorage-schema为 localStorage 数据添加版本号并最小化存储内容。client-swr-dedup是最核心的一条多个组件实例使用同一 key 调用useSWR(/api/users, fetcher)时只会发起一次请求天然获得去重、缓存与重新验证能力不可变数据可用 immutable 模式写操作可用useSWRMutation。client-passive-event-listeners则解释了滚动卡顿的一个常见根因浏览器默认会等待监听器执行完毕以确认是否调用preventDefault()导致滚动延迟。对 touch/wheel 监听添加{ passive: true }即可让浏览器立即滚动但自定义手势、缩放等需要preventDefault()的场景不能使用 passive。七、分类 5Re-render Optimizationrerender-—— MEDIUM该分类通过减少不必要的重渲染最小化浪费的计算并提升 UI 响应性。共 15 条规则是规则数量最多的分类rerender-defer-reads不要订阅只在回调中使用的状态rerender-memo把昂贵工作提取到 memoized 组件rerender-memo-with-default-value把非原始类型的默认 props 提升为常量rerender-dependencieseffect 依赖使用原始类型rerender-derived-state订阅派生布尔值而非原始连续值rerender-derived-state-no-effect在渲染期间派生状态而非在 effect 中rerender-functional-setstate用函数式 setState 保持回调稳定rerender-lazy-state-init为昂贵的初始值向 useState 传入函数rerender-simple-expression-in-memo简单原始表达式不要包 useMemorerender-split-combined-hooks拆分依赖独立的组合 hooksrerender-move-effect-to-event把交互逻辑放进事件处理器rerender-transitions非紧急更新使用 startTransitionrerender-use-deferred-value延迟昂贵渲染保持输入框响应rerender-use-ref-transient-values高频临时值用 ref 存储rerender-no-inline-components不要在组件内部定义组件。rerender-no-inline-components值得重点关注在组件内部定义组件每次渲染都会产生新的组件类型React 会将其视为不同组件并整体卸载重挂导致输入框失焦、动画重启、effect 重复执行、滚动位置重置等典型症状。正确做法是提取为独立组件并传 props。rerender-derived-state-no-effect则展示了最常见的反模式用 state effect 派生fullName完全可以用渲染期直接计算替代既避免多余渲染又防止状态漂移。八、分类 6Rendering Performancerendering-—— MEDIUM该分类优化渲染过程本身减少浏览器需要做的工作。共 11 条规则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抑制预期内的 hydration 不匹配告警rendering-activity显示/隐藏用 Activity 组件rendering-conditional-render条件渲染用三元而非rendering-usetransition-loading加载态优先用 useTransitionrendering-resource-hints用 React DOM 资源提示做预加载rendering-script-defer-asyncscript 标签使用 defer 或 async。rendering-content-visibility展示了如何用 CSS 直接跳过视口外内容的布局与绘制对列表项施加content-visibility: auto; contain-intrinsic-size: 0 80px;渲染 1000 条消息时浏览器可跳过约 990 条屏外内容的布局/绘制显著加快首屏渲染。rendering-resource-hints整理了 React DOM 的 6 个资源预加载 API 及其适用场景prefetchDNS稍后连接的第三方域名、preconnect即将请求的 API/CDN、preload当前页面关键资源、preloadModule可能的下一次导航 JS 模块、preinit需尽早执行的样式/脚本、preinitModule需尽早执行的 ES 模块。在 Server Components 中调用这些 API可在客户端收到 HTML 之前就开始加载资源。九、分类 7JavaScript Performancejs-—— LOW-MEDIUM该分类收集热点路径上的微优化单条收益不大但累积起来可观。共 14 条规则js-batch-dom-css用 class 或 cssText 分组修改 CSS避免布局抖动layout thrashingjs-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用循环求 min/max而不是排序js-set-map-lookups用 Set/Map 做 O(1) 查找js-tosorted-immutable用toSorted()保证不可变js-flatmap-filter用 flatMap 一次完成映射与过滤js-request-idle-callback把非关键工作推迟到浏览器空闲时间。js-index-maps给出了量化的收益1000 个订单 × 1000 个用户场景下用new Map(users.map(u [u.id, u]))替代每次.find()操作数从 100 万次降到 2000 次。js-tosorted-immutable则提醒.sort()会原地修改数组破坏 React 的不可变模型应改用返回新数组的.toSorted()以及toReversed()、toSpliced()、with()旧环境可用展开运算符[...items].sort()兜底。十、分类 8Advanced Patternsadvanced-—— LOW该分类收录需要谨慎实现的特定场景高级模式。共 4 条规则advanced-effect-event-deps不要把useEffectEvent的结果放进 effect 依赖数组advanced-event-handler-refs把事件处理器存进 refsadvanced-init-once每次应用加载只初始化一次advanced-use-latest用 useLatest 保持回调引用稳定。advanced-effect-event-deps解释了一个容易踩坑的点Effect Event 函数的身份在每次渲染时都会变化把它们加入useEffect依赖数组会导致 effect 每次渲染都重跑并触发 Hooks lint 规则。正确做法是以真正响应式值为依赖在 effect 内部调用 Effect Event。advanced-init-once则针对应用级初始化场景不要放在组件的useEffect([])中组件会重挂、effect 会重跑而应使用模块级守卫标志didInit或入口模块的顶层初始化。十一、影响级别体系从 CRITICAL 到 LOW 的收益分级README.md 明确了完整的 6 档影响级别CRITICAL最高优先级主要性能收益HIGH显著性能提升MEDIUM-HIGH中高收益MEDIUM中等性能改进LOW-MEDIUM中低收益LOW增量改进。这套分级与 8 大分类一一对应构成先修瀑布流和 bundle再优化服务端与客户端数据获取最后处理重渲染、渲染与 JS 微优化的执行顺序让自动化重构能按 ROI 排序投入。十二、规则文件规范命名约定与统一结构_sections.md末尾的括号 ID 与文件名前缀的映射在 README.md 中被落实为具体的维护规范规则文件采用area-description.md命名例如async-parallel.md下划线开头的文件_sections.md、_template.md是特殊文件不参与编译分类section从文件名前缀自动推断规则按标题在分类内自动排序无需人工编号构建期自动生成 ID如 1.1、1.2。_template.md 定义了每条规则的统一结构frontmatter标题、影响级别、可选的影响描述、标签 规则正文为什么重要 错误示例及说明 正确示例及说明 参考链接。编译后的完整文档即 AGENTS.md其中每条规则都包含完整代码对照与补充语境。十三、在 open-slide 仓库中的应用场景该技能被 open-slide 以 skill 形式收纳在.agents/skills/目录见 skills-lock.json 中的引用其 AGENTS.md 在开头明确了适用人群与定位这份文档主要供 Agent 与 LLM 在维护、生成或重构 React/Next.js 代码库时遵循人类读者也能从中受益但此处指引针对 AI 辅助工作流的一致性进行了优化。结合 SKILL.md 的 When to Apply 章节实际使用场景包括编写新的 React 组件或 Next.js 页面实现客户端或服务端的数据获取审查代码中的性能问题重构现有 React/Next.js 代码优化 bundle 体积或加载时间。具体使用时可按先查分类总览定位问题域 → 再读该分类下的规则文件获取错误/正确代码对照 → 最后在 AGENTS.md 中查阅编译后的完整版的路径查阅也可直接按文件名前缀如bundle-、server-在rules/目录中检索目标规则。结语这套 8 大分类的规则体系本质上是把 React/Next.js 性能优化从经验转化为可按优先级执行的清单从 CRITICAL 的瀑布流消除与 bundle 瘦身到 LOW 的微优化与高级模式每条规则都配有可复制、可对照的代码示例。无论用于人工审查还是 Agent 自动化重构按_sections.md定义的优先级顺序逐层排查都能以最小的排查成本锁定最大的性能收益。赞分享【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载相关推荐Vercel React 性能优化最佳实践8 大分类规则体系与 69 条实战规则深度解析Vercel React 性能优化最佳实践8 大分类规则体系与 69 条实战规则深度解析 本文以 plate 仓库内置的 .agents/skills/ver前端富文本UI组件Vercel React 与 Next.js 性能优化最佳实践70 条规则、8 大分类的完整实战指南Vercel React 与 Next.js 性能优化最佳实践70 条规则、8 大分类的完整实战指南 本指南以当前仓库 .agents/skills/verc可观测性AI 评测LLMOpsAI 应用人工智能Polar 前端工程实践Vercel React 与 Next.js 性能优化规则全解析40 规则 × 8 大类别Polar 前端工程实践Vercel React 与 Next.js 性能优化规则全解析40 规则 × 8 大类别 本文系统整理并深度解析本仓库内 Ve后端前端金融科技创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考