用途:这是一份面向 React 应用的性能优化指南,改编自 Vercel Engineering,包含 7 个类别、30 条规则,按影响程度排序,用于在编写、审查或重构 React 代码时主动参考,指导自动化重构与代码生成。
定制说明:该版本针对纯 React 19.2 定制,移除了服务端数据获取与 SWR 规则(项目使用 react-query),移除了 Next.js 专属规则(如 next/dynamic、SSR hydration 等);因启用了 React Compiler,已移除 memo、useMemo、useCallback 等记忆化规则。
适用时机:编写新 React 组件、审查性能问题、重构现有代码、优化打包体积或加载时间。
规则分类与优先级:1. 消除瀑布流(CRITICAL,前缀 async-),含 async-defer-await、async-parallel、async-suspense-boundaries;2. 打包体积优化(CRITICAL,前缀 bundle-),含 bundle-barrel-imports、bundle-conditional、bundle-preload;3. 客户端模式(MEDIUM-HIGH,前缀 client-),含 client-localstorage-schema、client-passive-event-listeners;4. 重渲染优化(MEDIUM,前缀 rerender-),含 rerender-defer-reads、rerender-dependencies、rerender-derived-state、rerender-functional-setstate、rerender-lazy-state-init、rerender-transitions;5. 渲染性能(MEDIUM,前缀 rendering-),含 rendering-animate-svg-wrapper、rendering-content-visibility、rendering-svg-precision、rendering-activity、rendering-conditional-render;6. JavaScript 性能(LOW-MEDIUM,前缀 js-),含 js-batch-dom-css、js-index-maps、js-cache-property-access、js-cache-function-results、js-cache-storage、js-combine-iterations、js-length-check-first、js-early-exit、js-hoist-regexp、js-min-max-loop、js-set-map-lookups、js-tosorted-immutable;7. 高级模式(LOW,前缀 advanced-),含 advanced-event-handler-refs。
使用方式:阅读各规则文件获取详细说明与代码示例,如 rules/async-parallel.md、rules/bundle-barrel-imports.md;每个规则文件包含重要性简述、错误代码示例及说明、正确代码示例及说明、补充背景与参考。完整指南见 AGENTS.md。
限制:资料未提供安装命令、收费信息、平台要求或具体效果数据。