人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载本文围绕 ZCode 仓库中随技能分发的.agents/skills/react-best-practices规则体系展开它是一套由 Vercel Engineering 维护、面向 React 与 Next.js 应用性能优化的 70 条规则合集按影响级别划分为 8 个分节sections。读者读完本文将掌握这套规则分节机制文件名前缀与影响级别如何组织、每一类规则的核心优化手段与可复制的代码示例并能通过 ZCode 的zcode skills命令在实际开发中检索和引用这些规则。技能定位ZCode 中为什么内置一套 React 性能规则在 ZCode 仓库根目录的.agents/skills/react-best-practices/下存放着一份完整的 React/Next.js 性能优化指南vendor 自 Vercel Engineering版本 1.0.0见 metadata.json。其用途是在编写、审查或重构 React/Next.js 代码时作为自动化重构与代码生成所遵循的性能规则依据详见 SKILL.md 的 description。该目录的组成清晰对应了技能的三个层次SKILL.md定义技能的触发时机写组件、数据获取、性能审查、包体积优化等与规则分类的优先级总表AGENTS.md全部 70 条规则的完整汇编文档每条规则含影响级别、错误/正确代码对照与参考rules/70 个独立规则文件每个文件遵循 rules/_template.md 规定的格式title、impact、impactDescription、tags 元数据 错误/正确示例。在 ZCode 中这类技能可以通过 CLI 直接检索。zcode skills命令实现于 apps/zcode-cli/packages/cli/src/skills-command.ts提供两个子命令zcode skills list列出当前工作区发现的全部技能含scope/source、path、描述与诊断信息zcode skills inspect name查看单个技能的元数据名称、作用域、来源、路径、字节大小、是否可安全自动加载safeToAutoLoad与完整内容支持--json输出结构化结果便于 Agent 与自动化工作流消费。规则分节机制_sections.md 如何组织 70 条规则.agents/skills/react-best-practices/rules/_sections.md是整个规则体系的分节定义文件section registry。它明确了两条约定分节即文件名前缀文档中每个分节标题后的括号内是该节的 section ID直接对应规则文件的文件名前缀——例如async-parallel.md属于async前缀的分节bundle-barrel-imports.md属于bundle前缀的分节分节按影响级别排序从 CRITICAL 到 LOW 依次排列引导使用者优先处理收益最大的优化项。8 个分节及其影响级别、描述如下顺序分节前缀影响级别核心目标1Eliminating Waterfalls消除瀑布请求async-CRITICAL消除串行 await 造成的网络延迟累加2Bundle Size Optimization包体积优化bundle-CRITICAL缩小初始包体积改善 TTI 与 LCP3Server-Side Performance服务端性能server-HIGH优化服务端渲染与数据获取消除服务端瀑布4Client-Side Data Fetching客户端数据获取client-MEDIUM-HIGH自动去重与高效数据获取减少冗余网络请求5Re-render Optimization重渲染优化rerender-MEDIUM减少不必要的重渲染与浪费的计算6Rendering Performance渲染性能rendering-MEDIUM减少浏览器渲染阶段的工作量7JavaScript PerformanceJS 性能js-LOW-MEDIUM热路径微观优化积少成多8Advanced Patterns高级模式advanced-LOW针对特定场景需谨慎实现的高级模式_sections.md强调Waterfalls 是头号性能杀手每增加一个串行 await 就会累加一整次网络延迟消除瀑布的收益最大CRITICAL 级而 bundle 优化直接影响 TTI/LCP 两个核心 Web 指标。下面按影响级别从高到低展开每类规则的具体内容示例取自 rules/ 与 AGENTS.md。一、消除瀑布请求async-CRITICAL瀑布waterfall指多个异步操作逐个串行等待每多一次await总耗时就累加一整次网络往返。该分节包含 6 条规则核心思路是尽早开始、按需等待、能并行就并行。async-parallel独立操作用Promise.all()并行独立的异步操作不存在相互依赖时应并发执行。串行写法需要 3 次网络往返const user await fetchUser(); const posts await fetchPosts(); const comments await fetchComments();并行写法只需 1 次往返等价于并行耗时const [user, posts, comments] await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);该规则在分节中标注影响为 CRITICAL2-10× 提升完整实现见 rules/async-parallel.md。async-defer-await把 await 推迟到真正使用它的分支如果某个分支根本不需要异步结果就不应在分支前等待。错误写法是无论skipProcessing是否为真都先await fetchUserData(userId)正确写法是先在同步分支提前返回需要数据时才执行 await。同理先查资源再查权限资源不存在时直接返回 Not Found避免无谓的权限查询也属于这类优化详见 rules/async-defer-await.md。async-cheap-condition-before-await先用廉价同步条件做前置判断当分支同时依赖一个廉价同步条件本地 props、请求元数据、已加载状态和一个异步标志如getFlag()命中网络、feature-flag 服务或数据库时先判断廉价条件。错误写法const someFlag await getFlag(); if (someFlag someCondition) { /* ... */ }正确写法让someCondition为假时根本不会发起异步调用if (someCondition) { const someFlag await getFlag(); if (someFlag) { /* ... */ } }它是async-defer-await针对flag cheapCondition场景的特化见 rules/async-cheap-condition-before-await.md。async-dependencies部分依赖场景用 better-all 最大化并行当任务存在部分依赖如 profile 依赖 user而 config 不依赖任何人时Promise.all的顺序写法会让 profile 白白等待 config。使用better-all可以让每个任务在最早可行时刻启动若不想引入额外依赖也可以先把有依赖的 promise 用.then()链起来最后统一Promise.allconst userPromise fetchUser(); const profilePromise userPromise.then((user) fetchProfile(user.id)); const [user, config, profile] await Promise.all([userPromise, fetchConfig(), profilePromise]);async-api-routesAPI 路由中尽早启动 promise、延迟 awaitAPI 路由与 Server Actions 中独立的操作应在声明处立即启动不一定要立刻 awaitexport async function GET(request: Request) { const sessionPromise auth(); const configPromise fetchConfig(); const session await sessionPromise; const [config, data] await Promise.all([configPromise, fetchData(session.user.id)]); return Response.json({ data, config }); }这样 auth 与 config 同时开始data 只在拿到 session 后启动消除了config 等 auth、data 等两者的串行链。async-suspense-boundaries用 Suspense 边界流式渲染外壳 UI不要在异步组件返回 JSX 前整体等待数据而应把数据加载限制在局部组件内让页面外壳Sidebar/Header/Footer立即渲染、数据区域用 Suspense fallback 占位后流式填充。进阶写法是把同一个 promise 通过 props 传给多个消费组件并用use(promise)解包多个组件共享一次请求。该模式适用于外壳不必等数据的场景当数据影响布局决策、属于首屏 SEO 关键内容、查询极小或需避免布局跳动时则不宜使用见 rules/async-suspense-boundaries.md。二、包体积优化bundle-CRITICAL初始包体积直接决定 TTI可交互时间与 LCP最大内容绘制两项核心指标。该分节共 6 条规则。bundle-barrel-imports避免 barrel 文件导入barrel 文件如index.js中export * from ./module是成百上千个模块的再导出入口热门图标/组件库入口甚至可达上万个 re-export。规则指出许多 React 包仅 import 就要耗费 200-800ms影响开发速度与生产冷启动。当库被标记为 external不打进 bundle时 tree-shaking 无从生效强行打包又会拖慢构建。推荐的解决路径Next.js 13.5 可继续使用标准导入写法由构建工具自动转为直接导入保持类型安全与自动补全非 Next.js 项目改用深度路径直接导入如import Button from mui/material/Button。规则同时给出类型提示部分库如lucide-react的深度导入路径不携带.d.ts在strict/noImplicitAny下会退化为隐式 any优先使用optimizePackageImports或先确认库为其子路径导出了类型详见 rules/bundle-barrel-imports.md。bundle-analyzable-paths优先使用可静态分析的路径构建工具只能在构建期静态分析出可达文件集合把真实路径藏进变量或过度动态拼接会导致打包器被迫纳入一大片可能的文件造成服务端包更大、构建更慢、冷启动更差、内存占用更高。错误写法是import(PAGE_MODULES[pageName])字符串值放在as const对象中仍不可分析正确写法是把每个路径写成字面量并封装为函数const PAGE_MODULES { home: () import(./pages/home), settings: () import(./pages/settings), } as const; const Page await PAGE_MODULES[pageName]();同样的原则适用于fs文件读取如path.join(process.cwd(), content/ contentKind)应改为按 kind 字面量拼出具体目录影响 Next.js 的 output file tracing。可对比 rules/bundle-analyzable-paths.md。bundle-dynamic-imports重组件用 next/dynamic 按需加载对首屏不需要的重组件示例中 Monaco 编辑器约 300KB使用next/dynamic懒加载并配合ssr: false避免服务端打包该模块import dynamic from next/dynamic; const MonacoEditor dynamic(() import(./monaco-editor).then((m) m.MonacoEditor), { ssr: false, });bundle-defer-third-party第三方非关键库延后到 hydration 之后分析、日志、错误上报不阻塞用户交互应通过dynamicssr: false在 hydration 后加载而不是放进初始 bundle。bundle-conditional功能启用时才加载模块大型数据或模块只在功能被激活时加载。示例为动画帧数据enabled为真且尚未加载时才import(./animation-frames.js)并用typeof window ! undefined守卫防止该模块被打进 SSR 包。bundle-preload基于用户意图预加载在 hover/focus 等意图信号出现时提前void import(./monaco-editor)或在 feature flag 开启时预加载并mod.init()以降低感知延迟。三、服务端性能server-HIGH该分节优化服务端渲染与数据获取消除服务端瀑布并降低响应时间共 10 条规则。server-auth-actionsServer Actions 要像 API 路由一样鉴权Server Actions 与 API 路由一样是公开端点可以被直接调用不能只依赖 middleware 或页面级守卫。必须在每个 action 内部完成鉴权verifySession()与授权角色/属主校验最好配合 zod 做输入校验。完整示例见 rules/server-auth-actions.md。server-no-shared-module-state不要在模块级存放请求数据服务端渲染可并发执行于同一进程模块级可变变量会被并发请求互相污染造成数据串号甚至安全漏洞。应把请求数据局限在渲染树内通过 props 传递。仅以下情况可安全使用模块级状态不变的静态资源/配置、正确设计键的跨请求共享缓存、不含请求/用户可变数据的进程级单例。server-hoist-static-io静态 I/O 提升到模块级字体、Logo、图标、运行时不变的配置文件等静态资源应把读取/网络请求提升到模块顶层——模块只在首次导入时执行一次避免每个请求都重复文件系统读取或网络拉取。异步写法可以在模块级保存已启动的 promise请求处理内统一Promise.all同步readFileSync也只阻塞模块初始化。注意随请求/用户变化的资源、运行期可能变更的文件、过大或敏感的数据不适合此模式见 rules/server-hoist-static-io.md。server-serialization/server-dedup-props最小化并去重 RSC 边界序列化React Server/Client 边界会把对象所有属性序列化为字符串嵌入 HTML 与后续 RSC 请求直接影响页面体积与加载时间。只传客户端实际用到的字段50 字段的 user 只传name。另外RSC 序列化按对象引用去重而非按值去重同一引用只序列化一次。因此usernames与usernames.toSorted()会重复序列化整个数组string[] 影响最大、object[] 只重复数组结构而内层对象按引用去重.filter()/.map()/...展开等产生新引用的操作都会破坏去重。推荐把这类转换放到客户端执行。例外当转换开销大或客户端不需要原始数据时仍可传派生数据。server-cache-lru跨请求 LRU 缓存React.cache()仅在一个请求内生效对跨顺序请求共享的数据如用户点击按钮 A 再点 B使用 LRU 缓存lru-cache示例配置max: 1000、ttl: 5 * 60 * 1000。在函数实例可复用的运行环境下如 Vercel Fluid Compute多个并发请求共享同一实例与缓存无需引入 Redis传统 serverless 每次调用相互隔离则应考虑外部存储做跨进程缓存。server-cache-react单请求内用 React.cache() 去重React.cache()对同一次请求内的重复异步调用去重最适用于鉴权与数据库查询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 } }); });注意React.cache()用Object.is浅比较参数内联对象每次都是新引用、必然缓存 miss应复用同一引用。在 Next.js 中fetch已被自动 memoize无需再用cache()包裹但数据库查询、重计算、鉴权、文件系统等非 fetch 异步操作仍需要它见 rules/server-cache-react.md。server-parallel-fetching用组件组合并行化服务端数据获取RSC 在组件树内是串行执行的。错误写法是Page先await fetchHeader()再渲染Sidebar /Sidebar 的获取被阻塞正确写法是把 Header、Sidebar 各自封装为异步组件、由非异步的Page组合渲染两个 fetch 同时进行也可借助childrenprop 实现布局并行。server-parallel-nested-fetching嵌套数据在单个 item 内串联对列表逐项取嵌套数据时不要先全部取 chat、再全部取 author两轮Promise.all一个慢 chat 会阻塞其余 99 个 chat 的 author 获取而应在每个 item 的 promise 内链式取依赖const chatAuthors await Promise.all( chatIds.map((id) getChat(id).then((chat) getUser(chat.author))), );server-after-nonblocking用 after() 做非阻塞操作把日志、分析、通知、缓存失效等副作用交给after()在响应发送后执行避免它们阻塞响应返回。after()在响应失败或重定向时也会执行可用于 Server Actions、Route Handlers 与 Server Components见 rules/server-after-nonblocking.md。四、客户端数据获取client-MEDIUM-HIGH该分节通过自动去重与高效数据获取减少冗余网络请求共 4 条规则。client-swr-dedup用 SWR 实现自动去重多个组件实例请求同一资源时SWR 自动共享一次请求并缓存、重新校验。useSWR(/api/users, fetcher)取代每个实例各自 useEffect fetch不可变数据用useImmutableSWR写操作可用useSWRMutation的trigger()。client-event-listeners去重全局事件监听器N 个组件实例各自注册 keydown 监听会重复工作。用模块级Mapkey, Setcallback维护回调集合配合useSWRSubscription(global-keydown, ...)注册唯一一个全局监听器实现N 实例 1 监听器。client-passive-event-listeners滚动监听使用 passivetouch/wheel 监听器默认会让浏览器等待监听器执行完再滚动。对不调用preventDefault()的监听追踪、日志等加{ passive: true }可消除滚动延迟自定义手势、缩放等需要preventDefault()的场景不能使用。client-localstorage-schemalocalStorage 键带版本并最小化存储给 key 加版本前缀userConfig:v2只存 UI 需要的字段用 try-catch 包裹读写隐身模式、配额超限、禁用存储都会抛错并提供 v1→v2 的迁移函数。这样支持 schema 演进、缩小存储体积并避免误存 token/PII/内部标志见 rules/client-localstorage-schema.md。五、重渲染优化rerender-MEDIUM减少不必要的重渲染以降低浪费的计算、提升 UI 响应性共 15 条规则rerender-derived-state/rerender-derived-state-no-effect能在渲染期由 props/state 推导的值不要存进 state、不要在 effect 里 setState你可能不需要 effect模式fullName firstName lastName直接推导。rerender-defer-reads只在回调里读取的动态状态searchParams、localStorage不要订阅——回调内直接new URLSearchParams(window.location.search)按需读取。rerender-simple-expression-in-memo简单表达式少量运算符、结果为 boolean/number/string不要包useMemouseMemo的依赖比较开销可能大于表达式本身。rerender-no-inline-components不要在组件内定义组件每次渲染都会产生新组件类型导致整棵子树卸载重挂输入框失焦、动画重播、effect 反复清理/执行、滚动位置重置是典型症状应通过 props 传递数据。rerender-memo-with-default-valuememo 组件的非原始默认参数如onClick () {}每次渲染都产生新引用、破坏 memo 相等性应提取为模块级常量const NOOP () {}。rerender-memo把昂贵工作提取到 memo 子组件配合父级提前 return 跳过计算。rerender-dependencieseffect 依赖使用原始值[user.id]而非[user]对派生布尔值做依赖isMobile而非连续变化的width。rerender-move-effect-to-event由具体用户动作提交、点击、拖拽触发的副作用放在事件处理器里不要建模成state effect避免无关变更触发 effect 重跑与副作用重复。rerender-split-combined-hooks多个依赖不同的独立任务拆成多个useMemo/useEffect避免任一依赖变化时全部重算。rerender-functional-setstate基于当前状态更新时使用函数式 setState获得稳定回调引用、杜绝陈旧闭包、精简依赖数组。rerender-lazy-state-init昂贵初始值传给useState(() buildSearchIndex(items))函数形式避免每次渲染都执行初始化。rerender-transitions滚动等高频非紧急更新用startTransition(() setScrollY(window.scrollY))保持 UI 响应。rerender-use-deferred-value输入触发的昂贵派生渲染用useDeferredValue配合useMemo让输入保持跟手、结果延迟渲染可用query ! deferredQuery做过期态视觉反馈。rerender-use-ref-transient-values高频瞬态值鼠标追踪、计时器用useRef直接写 DOM不触发重渲染。上述规则在 AGENTS.md 第 5 章均有完整的错误/正确代码对照且多处注明若项目已启用 React Compiler编译器会自动优化部分手动 memo 场景。六、渲染性能rendering-MEDIUM优化渲染流程、减少浏览器工作量共 11 条规则rendering-animate-svg-wrapper多数浏览器对 SVG 元素上的 CSS3 动画没有硬件加速用div包裹 SVG 并动画 wrapper对transform、opacity等所有变换生效。rendering-content-visibility长列表加content-visibility: autocontain-intrinsic-size浏览器跳过屏外元素的布局/绘制示例中 1000 条消息约 990 条屏外初始渲染显著提速。rendering-hoist-jsx把静态 JSX如骨架屏、大 SVG提取为模块级常量复用避免每次渲染重建元素。rendering-svg-precision降低 SVG 坐标精度如保留 1 位小数减小文件体积可用 SVGO 自动化。rendering-hydration-no-flicker依赖客户端存储localStorage/cookies的内容用同步内联script在 React hydration 前更新 DOM避免 SSR 报错与闪烁。rendering-hydration-suppress-warning对服务器/客户端本就不同的预期差异时间、随机 ID、时区格式化用suppressHydrationWarning抑制噪音警告但不得用来掩盖真实 bug。rendering-activity频繁切换显隐的昂贵组件用Activity mode{isOpen ? visible : hidden}保留状态与 DOM。rendering-script-defer-async脚本加deferHTML 解析完成后按序执行或async下载完成即执行、不保序Next.js 中优先使用next/script的strategy属性。rendering-conditional-render条件渲染用显式三元count 0 ? Badge/ : null避免count ...在 count 为 0/NaN 时把数字渲染到页面。rendering-resource-hints使用 React DOM 资源预加载 APIprefetchDNS/preconnect/preload/preloadModule/preinit/preinitModule在服务端组件中尽早提示浏览器所需资源示例含字体preload、关键 CSSpreinit、路由模块preloadModule。rendering-usetransition-loading用useTransition内置的isPending取代手写setIsLoading加载态自动处理中断、错误重置并保持 UI 响应。七、JavaScript 性能js-LOW-MEDIUM热路径上的微观优化共 14 条规则重点是把 O(n²) 压到 O(n) 或 O(1)js-batch-dom-css避免布局抖动——不要交错写样式与读布局offsetWidth/getBoundingClientRect会强制同步 reflow批量写入后统一读取优先用 CSS class 切换而非内联样式。js-index-maps重复按同一 key 查找时先建Map如订单按 userId 关联用户从每次.find()O(n) 降为 O(1)1000 订单 × 1000 用户100 万次操作 → 2 千次。js-cache-property-access循环内缓存对象属性访问与数组长度。js-cache-function-results模块级Map缓存重复函数调用结果如 slugify单值函数可用模块级变量缓存并在鉴权变化时失效。js-cache-storage缓存localStorage/sessionStorage/cookie 的同步读通过storage事件与visibilitychange失效外部变更。js-combine-iterations多次filter/map合并为一次循环一次遍历同时产出 admins/testers/inactive。js-early-exit函数尽早 return命中首个错误立即返回。js-length-check-first数组比较前先检查长度长度不同必不相等跳过昂贵的排序/深比较。js-hoist-regexpRegExp 提升到模块级或用useMemo注意/g全局正则有可变lastIndex状态。js-flatmap-filter.map().filter(Boolean)产生中间数组并遍历两次用.flatMap()单趟完成映射与过滤。js-min-max-loop求 min/max 用单趟循环 O(n)不要排序 O(n log n)小数组可用Math.min(...arr)但展开运算符对超大数组有限制。js-set-map-lookups重复成员判断用Set/Map从 O(n) 变 O(1)。js-tosorted-immutable用.toSorted()而非原地.sort()避免修改 props/state 破坏 React 不可变性并引发陈旧闭包 bug配套的不可变方法还有.toReversed()、.toSpliced()、.with()旧环境回退[...items].sort(...)。js-request-idle-callback把分析、存储、预取等非关键任务延迟到浏览器空闲期执行可用timeout兜底、按IdleDeadline.timeRemaining()分块处理大任务并提供不支持环境下的 setTimeout 回退。八、高级模式advanced-LOW针对特定场景、需要谨慎实现的 4 条规则均与 React 最新的 Effect Event 相关advanced-effect-event-depsuseEffectEvent返回的函数身份每次渲染都会变化不要把它放进 effect 依赖数组会导致 effect 每次渲染重跑并触发 hooks lint 规则依赖数组只放真正的响应式值。advanced-init-once每次应用加载只执行一次的初始化不要放在组件useEffect([])里开发模式会跑两次、重挂载会再跑用模块级didInit守卫或入口模块顶层初始化。advanced-event-handler-refs需要在不因回调变化而重新订阅的 effect 中使用回调时把它存进 ref / 用useEffectEvent保持订阅稳定。advanced-use-latest用useEffectEvent在回调中读取最新值而无需加入依赖数组避免 effect 重跑与陈旧闭包防抖搜索示例effect 只依赖query。九、在 ZCode 中应用这套技能这套规则在 ZCode 中的消费路径主要有两条直接阅读仓库文档以 rules/_sections.md 为目录总览确定优先级按文件名前缀进入 rules/ 下对应规则文件查看错误/正确示例完整版见 AGENTS.md。新增规则时需同时更新独立规则文件与 AGENTS.md 对应分节格式遵循 rules/_template.md并保证相对链接从承载它的文件出发仍然有效README.md 中的维护约定。通过 CLI 检索技能在 ZCode CLI 中执行zcode skills list查看工作区技能清单zcode skills inspect name查看单条技能的元数据与全文加--json输出结构化数据供脚本与 Agent 消费实现见 apps/zcode-cli/packages/cli/src/skills-command.ts。技能元数据中的safeToAutoLoad、scope/source等字段由zcode/bootstrap的listZCodeSkills/inspectZCodeSkill提供用于判断技能是否可被自动加载进上下文。结语从分节到落地的优先级策略_sections.md的核心价值在于把 70 条规则组织成一张按收益排序的行动清单先处理 CRITICAL 级的瀑布请求与包体积它们直接决定 TTI/LCP 与网络开销再依次处理服务端、客户端数据获取随后是重渲染与渲染阶段最后才是 JS 微观优化与高级模式。在实际重构中可以对照该分节顺序逐项审查代码用 rules/_template.md 的错误/正确示例格式作为评审与生成代码的统一标准从而把性能优化从经验驱动变成可检索、可复用、可自动执行的工程实践。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐ZCode 内置 Vercel React/Next.js 性能优化技能全解40 条规则的 Agent 实战指南ZCode 内置 Vercel React/Next.js 性能优化技能全解40 条规则的 Agent 实战指南 导读 ZCodeAI coding agZCode 内置 React 最佳实践技能指南Vercel 70 条性能优化规则解析与应用ZCode 内置 React 最佳实践技能指南Vercel 70 条性能优化规则解析与应用 导读 ZCode 仓库在 .agents/skills/reactVercel React 最佳实践8 大分类的 React/Next.js 性能优化规则体系解析Vercel React 最佳实践8 大分类的 React/Next.js 性能优化规则体系解析 导读 本文基于 open slide 仓库内嵌的 .agen上一篇Bilibili-Evolved「展开弹幕列表」功能全解析自动展开时机、弹幕量阈值与源码实现下一篇Apache Arrow 格式版本与兼容性保障Format Version / Library Version 双版本体系深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考