React性能优化Skill react-optimise

---

名称: react-optimise 描述: 应用级别的React性能优化，涵盖React编译器精通、打包优化、渲染性能、数据获取、核心Web指标、状态订阅、性能分析和内存管理。当优化React应用性能、分析打包大小、改进核心Web指标或分析渲染瓶颈时使用。通过整体性能策略补充react技能（API级别模式）。不覆盖React 19 API使用（见react技能）或Next.js特定功能（见nextjs-16-app-router技能）。

React优化最佳实践

React应用程序的应用级别性能优化指南。包含8个类别的43条规则，按影响从关键（React编译器、打包优化）到增量（内存管理）优先排序。

何时应用

• 优化React应用程序性能或打包大小
• 采用或故障排除React编译器v1.0
• 拆分打包和配置代码分割
• 改进核心Web指标（INP、LCP、CLS）
• 分析渲染性能并识别瓶颈
• 修复长期单页应用程序中的内存泄漏
• 优化数据获取模式并消除瀑布

规则类别

类别	影响	规则数	关键主题
React编译器精通	关键	6	编译器友好代码、跳出检测、增量采用
打包与加载	关键	6	路由分割、桶文件消除、动态导入、预取
渲染优化	高	6	虚拟化、子组件模式、防抖、CSS隔离
数据获取性能	高	5	瀑布消除、路由预加载、SWR、去重
核心Web指标	中-高	5	INP让步、LCP优先级、CLS预防、图像优化
状态与订阅性能	中-高	5	上下文分割、选择器、原子状态、派生状态
性能分析与测量	中	5	DevTools分析、火焰图、CI预算、生产构建
内存管理	低-中	5	效果清理、异步取消、闭包泄漏、堆分析

快速参考

关键模式 — 首先确保这些正确：

• 编写编译器友好的组件以解锁自动2-10倍优化
• 在路由边界分割代码以减少初始打包40-70%
• 消除桶文件以启用树摇
• 检测并修复静默编译器跳出

常见错误 — 避免这些反模式：

• 在渲染期间读取引用（破坏编译器优化）
• 导入整个库当只使用一个函数时
• 未在优化前分析（针对错误瓶颈）
• 缺少效果清理（订阅内存泄漏）

目录

1. React编译器精通 — 关键
   • 1.1 检测并修复静默编译器跳出 — 关键（防止丢失自动记忆化）
   • 1.2 隔离副作用从渲染以保持编译器正确性 — 关键（防止编译器产生错误缓存输出）
   • 1.3 采用编译器后移除手动记忆化 — 关键（组件文件代码减少20-40%）
   • 1.4 使用增量编译器采用与指令 — 关键（允许安全推出无需完整代码库迁移）
   • 1.5 使用启用编译的引用访问模式 — 关键（维护使用引用的组件的编译器优化）
   • 1.6 编写编译器友好的组件模式 — 关键（2-10倍自动渲染优化）
2. 打包与加载 — 关键
   • 2.1 配置依赖项以实现有效树摇 — 关键（依赖项中50-90%死代码消除）
   • 2.2 消除桶文件以启用树摇 — 关键（消除200-800ms导入成本）
   • 2.3 使用分析工具强制执行打包大小预算 — 关键（防止渐进打包大小回归）
   • 2.4 在交互时预取可能的下一个路由 — 关键（感知导航快200-1000ms）
   • 2.5 使用React.lazy在路由边界分割代码 — 关键（初始打包大小减少40-70%）
   • 2.6 对重库使用动态导入 — 关键（从关键路径移除100-500KB）
3. 渲染优化 — 高
   • 3.1 避免在JSX属性中创建内联对象 — 高（防止不必要的子组件重新渲染）
   • 3.2 对昂贵派生计算进行防抖 — 高（每次按键保存50-200ms）
   • 3.3 使用CSS隔离来隔离布局重新计算 — 高（减少60-90%布局重新计算）
   • 3.4 使用子组件模式防止父组件重新渲染 — 高（消除静态子树的重新渲染）
   • 3.5 为列表渲染性能使用稳定键 — 高（DOM操作从O(n)到O(1)移动）
   • 3.6 使用TanStack Virtual虚拟化长列表 — 高（DOM节点从O(n)到O(1)）
4. 数据获取性能 — 高
   • 4.1 在导航或重新获取时中止过时请求 — 高（防止显示过时数据）
   • 4.2 去重相同进行中请求 — 高（减少50-80%网络请求）
   • 4.3 消除顺序数据获取瀑布 — 高（页面加载快2-5倍）
   • 4.4 在组件挂载前路由级别预加载数据 — 高（消除200-1000ms）
   • 4.5 使用陈旧-同时-重新验证以保持缓存新鲜度 — 高（返回访问者感知0ms加载）
5. 核心Web指标 — 中-高
   • 5.1 使用web-vitals仪表化真实用户监控 — 中-高（实现数据驱动优化）
   • 5.2 通过响应式尺寸和懒加载优化图像 — 中-高（带宽减少40-70%）
   • 5.3 通过让步优化交互到下一次绘制 — 中-高（INP从500ms+降至200ms以下）
   • 5.4 通过优先级加载优化最大内容绘制 — 中-高（LCP改进200-1000ms）
   • 5.5 通过尺寸保留防止累计布局偏移 — 中-高（CLS从0.25+降至0.1以下）
6. 状态与订阅性能 — 中-高
   • 6.1 派生状态代替同步以实现零额外渲染 — 中-高（消除双渲染周期）
   • 6.2 将服务器状态与客户端状态管理分离 — 中-高（减少状态管理代码40%）
   • 6.3 分割上下文以隔离高频更新 — 中-高（减少5-50倍重新渲染）
   • 6.4 为独立反应值使用原子状态 — 中-高（减少3-10倍不必要的重新渲染）
   • 6.5 为细粒度更新使用基于选择器的订阅 — 中-高（重新渲染仅影响组件）
7. 性能分析与测量 — 中
   • 7.1 仅使用生产构建进行基准测试 — 中（防止开发模式开销的假阳性）
   • 7.2 在CI中强制执行性能预算 — 中（在合并前捕获90%性能问题）
   • 7.3 在优化前分析以针对真实瓶颈 — 中（优化努力效率提高10倍）
   • 7.4 阅读火焰图以识别热点渲染路径 — 中（识别80%渲染时间的精确函数）
   • 7.5 使用React性能轨道进行渲染分析 — 中（在分钟内精确定位渲染瓶颈）
8. 内存管理 — 低-中
   • 8.1 避免事件处理程序中的闭包内存泄漏 — 低-中（防止MB级内存保留）
   • 8.2 在卸载时取消异步操作 — 低-中（防止过时更新和内存保留）
   • 8.3 清理效果以防止订阅内存泄漏 — 低-中（防止线性内存增长）
   • 8.4 在清理函数中处置重资源 — 低-中（防止每个资源保留5-50MB）
   • 8.5 使用堆快照检测组件保留 — 低-中（识别10-100MB内存增长）

参考

1. https://react.dev
2. https://react.dev/blog/2025/10/07/react-compiler-1
3. https://web.dev/articles/vitals
4. https://tanstack.com/virtual
5. https://developer.chrome.com/docs/devtools/performance

相关技能

• 对于React 19 API最佳实践，见react技能
• 对于Next.js App Router优化，见nextjs-16-app-router技能
• 对于客户端表单处理，见react-hook-form技能