react-optimise

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Optimise Best Practices

React 优化最佳实践

Application-level performance optimization guide for React applications. Contains 43 rules across 8 categories, prioritized by impact from critical (React Compiler, bundle optimization) to incremental (memory management).

面向React应用的应用级性能优化指南。包含8个分类下的43条规则，按影响优先级排序，从最高优先级（React Compiler、包体积优化）到增量优化项（内存管理）。

When to Apply

适用场景

Optimizing React application performance or bundle size
Adopting or troubleshooting React Compiler v1.0
Splitting bundles and configuring code splitting
Improving Core Web Vitals (INP, LCP, CLS)
Profiling render performance and identifying bottlenecks
Fixing memory leaks in long-lived single-page applications
Optimizing data fetching patterns and eliminating waterfalls

优化React应用性能或包体积
接入或排查React Compiler v1.0相关问题
拆分bundle并配置代码分割
提升Core Web Vitals（INP、LCP、CLS）
分析渲染性能并定位瓶颈
修复长生命周期单页应用中的内存泄漏
优化数据请求模式，消除请求瀑布流

Rule Categories

规则分类

Category	Impact	Rules	Key Topics
React Compiler Mastery	CRITICAL	6	Compiler-friendly code, bailout detection, incremental adoption
Bundle & Loading	CRITICAL	6	Route splitting, barrel elimination, dynamic imports, prefetching
Rendering Optimization	HIGH	6	Virtualization, children pattern, debouncing, CSS containment
Data Fetching Performance	HIGH	5	Waterfall elimination, route preloading, SWR, deduplication
Core Web Vitals	MEDIUM-HIGH	5	INP yielding, LCP priority, CLS prevention, image optimization
State & Subscription Performance	MEDIUM-HIGH	5	Context splitting, selectors, atomic state, derived state
Profiling & Measurement	MEDIUM	5	DevTools profiling, flame charts, CI budgets, production builds
Memory Management	LOW-MEDIUM	5	Effect cleanup, async cancellation, closure leaks, heap analysis

分类	影响等级	规则数量	核心主题
React Compiler 掌握	最高优先级	6	编译器友好代码、退避检测、渐进式接入
包体积与加载	最高优先级	6	路由拆分、移除barrel文件、动态导入、预加载
渲染优化	高优先级	6	虚拟滚动、children模式、防抖、CSS containment
数据请求性能	高优先级	5	消除请求瀑布流、路由预加载、SWR、请求去重
Core Web Vitals	中高优先级	5	INP让出主线程、LCP优先级优化、CLS预防、图片优化
状态与订阅性能	中高优先级	5	Context拆分、选择器、原子状态、派生状态
性能分析与度量	中优先级	5	DevTools性能分析、火焰图、CI性能预算、生产构建
内存管理	中低优先级	5	Effect清理、异步操作取消、闭包泄漏、堆分析

Quick Reference

快速参考

Critical patterns — get these right first:

Write compiler-friendly components to unlock automatic 2-10x optimization
Split code at route boundaries to reduce initial bundle by 40-70%
Eliminate barrel files to enable tree shaking
Detect and fix silent compiler bailouts

Common mistakes — avoid these anti-patterns:

Reading refs during render (breaks compiler optimization)
Importing entire libraries when only using one function
Not profiling before optimizing (targeting the wrong bottleneck)
Missing effect cleanup (subscription memory leaks)

高优先级模式 —— 请优先落地这些规则：

编写编译器友好的组件，自动获得2-10倍的性能优化
按路由边界拆分代码，减少40-70%的初始包体积
移除barrel文件以支持Tree Shaking
检测并修复静默的编译器退避问题

常见错误 —— 请避免以下反模式：

渲染过程中读取refs（会破坏编译器优化）
只使用库中一个函数时却导入整个库
优化前不做性能分析（导致优化方向错误）
遗漏effect清理函数（导致订阅内存泄漏）

React Compiler Mastery — CRITICAL
- 1.1 Detect and Fix Silent Compiler Bailouts — CRITICAL (prevents losing automatic memoization)
- 1.2 Isolate Side Effects from Render for Compiler Correctness — CRITICAL (prevents compiler from producing incorrect cached output)
- 1.3 Remove Manual Memoization After Compiler Adoption — CRITICAL (20-40% code reduction in component files)
- 1.4 Use Incremental Compiler Adoption with Directives — CRITICAL (enables safe rollout without full codebase migration)
- 1.5 Use Ref Access Patterns That Enable Compilation — CRITICAL (maintains compiler optimization for ref-using components)
- 1.6 Write Compiler-Friendly Component Patterns — CRITICAL (2-10x automatic render optimization)
Bundle & Loading — CRITICAL
- 2.1 Configure Dependencies for Effective Tree Shaking — CRITICAL (50-90% dead code elimination in dependencies)
- 2.2 Eliminate Barrel Files to Enable Tree Shaking — CRITICAL (200-800ms import cost eliminated)
- 2.3 Enforce Bundle Size Budgets with Analysis Tools — CRITICAL (prevents gradual bundle size regression)
- 2.4 Prefetch Likely Next Routes on Interaction — CRITICAL (200-1000ms faster perceived navigation)
- 2.5 Split Code at Route Boundaries with React.lazy — CRITICAL (40-70% reduction in initial bundle size)
- 2.6 Use Dynamic Imports for Heavy Libraries — CRITICAL (100-500KB removed from critical path)
Rendering Optimization — HIGH
- 3.1 Avoid Inline Object Creation in JSX Props — HIGH (prevents unnecessary child re-renders)
- 3.2 Debounce Expensive Derived Computations — HIGH (50-200ms saved per keystroke)
- 3.3 Use CSS Containment to Isolate Layout Recalculation — HIGH (60-90% layout recalc reduction)
- 3.4 Use Children Pattern to Prevent Parent Re-Renders — HIGH (eliminates re-renders of static subtrees)
- 3.5 Use Stable Keys for List Rendering Performance — HIGH (O(n) DOM mutations to O(1) moves)
- 3.6 Virtualize Long Lists with TanStack Virtual — HIGH (O(n) to O(1) DOM nodes)
Data Fetching Performance — HIGH
- 4.1 Abort Stale Requests on Navigation or Re-fetch — HIGH (prevents stale data display)
- 4.2 Deduplicate Identical In-Flight Requests — HIGH (50-80% fewer network requests)
- 4.3 Eliminate Sequential Data Fetch Waterfalls — HIGH (2-5x faster page loads)
- 4.4 Preload Data at Route Level Before Component Mounts — HIGH (200-1000ms eliminated)
- 4.5 Use Stale-While-Revalidate for Cache Freshness — HIGH (0ms perceived load for returning visitors)
Core Web Vitals — MEDIUM-HIGH
- 5.1 Instrument Real User Monitoring with web-vitals — MEDIUM-HIGH (enables data-driven optimization)
- 5.2 Optimize Images with Responsive Sizing and Lazy Loading — MEDIUM-HIGH (40-70% bandwidth reduction)
- 5.3 Optimize Interaction to Next Paint with Yielding — MEDIUM-HIGH (INP from 500ms+ to under 200ms)
- 5.4 Optimize Largest Contentful Paint with Priority Loading — MEDIUM-HIGH (200-1000ms LCP improvement)
- 5.5 Prevent Cumulative Layout Shift with Size Reservations — MEDIUM-HIGH (CLS from 0.25+ to under 0.1)
State & Subscription Performance — MEDIUM-HIGH
- 6.1 Derive State Instead of Syncing for Zero Extra Renders — MEDIUM-HIGH (eliminates double-render cycle)
- 6.2 Separate Server State from Client State Management — MEDIUM-HIGH (reduces state management code by 40%)
- 6.3 Split Contexts to Isolate High-Frequency Updates — MEDIUM-HIGH (5-50x fewer re-renders)
- 6.4 Use Atomic State for Independent Reactive Values — MEDIUM-HIGH (3-10x fewer unnecessary re-renders)
- 6.5 Use Selector-Based Subscriptions for Granular Updates — MEDIUM-HIGH (reduces re-renders to only affected components)
Profiling & Measurement — MEDIUM
- 7.1 Benchmark with Production Builds Only — MEDIUM (prevents false positives from dev-mode overhead)
- 7.2 Enforce Performance Budgets in CI — MEDIUM (catches 90% of perf issues before merge)
- 7.3 Profile Before Optimizing to Target Real Bottlenecks — MEDIUM (10x more effective optimization effort)
- 7.4 Read Flame Charts to Identify Hot Render Paths — MEDIUM (identifies exact function causing 80% of render time)
- 7.5 Use React Performance Tracks for Render Analysis — MEDIUM (pinpoints render bottlenecks in minutes)
Memory Management — LOW-MEDIUM
- 8.1 Avoid Closure-Based Memory Leaks in Event Handlers — LOW-MEDIUM (prevents MB-scale memory retention)
- 8.2 Cancel Async Operations on Unmount — LOW-MEDIUM (prevents stale updates and memory retention)
- 8.3 Clean Up Effects to Prevent Subscription Memory Leaks — LOW-MEDIUM (prevents linear memory growth)
- 8.4 Dispose Heavy Resources in Cleanup Functions — LOW-MEDIUM (prevents 5-50MB per resource retention)
- 8.5 Use Heap Snapshots to Detect Component Retention — LOW-MEDIUM (identifies 10-100MB memory growth)

React Compiler 掌握 —— 最高优先级
- 1.1 检测并修复静默编译器退避问题 —— 最高优先级（避免丢失自动 memoization 能力）
- 1.2 将副作用与渲染逻辑隔离，保证编译器正确性 —— 最高优先级（避免编译器生成错误的缓存输出）
- 1.3 接入编译器后移除手动记忆化代码 —— 最高优先级（减少组件文件20-40%的代码量）
- 1.4 通过指令渐进式接入编译器 —— 最高优先级（无需全量迁移代码即可安全上线）
- 1.5 使用支持编译的Ref访问模式 —— 最高优先级（保留使用Ref组件的编译器优化能力）
- 1.6 编写编译器友好的组件模式 —— 最高优先级（自动获得2-10倍的渲染优化）
包体积与加载 —— 最高优先级
- 2.1 配置依赖以实现高效Tree Shaking —— 最高优先级（移除依赖中50-90%的死代码）
- 2.2 移除Barrel文件以支持Tree Shaking —— 最高优先级（减少200-800ms的导入耗时）
- 2.3 通过分析工具 enforce 包体积预算 —— 最高优先级（避免包体积逐步增长）
- 2.4 用户交互时预加载大概率会访问的下一个路由 —— 最高优先级（导航感知速度提升200-1000ms）
- 2.5 通过React.lazy按路由边界拆分代码 —— 最高优先级（减少40-70%的初始包体积）
- 2.6 重型库使用动态导入 —— 最高优先级（减少关键路径100-500KB的体积）
渲染优化 —— 高优先级
- 3.1 避免在JSX Props中创建内联对象 —— 高优先级（避免不必要的子组件重渲染）
- 3.2 对昂贵的派生计算做防抖处理 —— 高优先级（每次按键减少50-200ms耗时）
- 3.3 使用CSS Containment隔离布局重计算 —— 高优先级（减少60-90%的布局重计算）
- 3.4 使用Children模式避免父组件重渲染 —— 高优先级（消除静态子树的重渲染）
- 3.5 列表渲染使用稳定的Key提升性能 —— 高优先级（DOM操作复杂度从O(n)降低为O(1)移动）
- 3.6 使用TanStack Virtual对长列表做虚拟滚动 —— 高优先级（DOM节点数量从O(n)降低为O(1)）
数据请求性能 —— 高优先级
- 4.1 导航或重新请求时中止过时请求 —— 高优先级（避免展示过时数据）
- 4.2 对相同的进行中请求做去重处理 —— 高优先级（减少50-80%的网络请求）
- 4.3 消除串行数据请求瀑布流 —— 高优先级（页面加载速度提升2-5倍）
- 4.4 组件挂载前在路由层面预加载数据 —— 高优先级（减少200-1000ms耗时）
- 4.5 使用 stale-while-revalidate 策略保证缓存新鲜度 —— 高优先级（回访用户感知加载耗时为0ms）
Core Web Vitals —— 中高优先级
- 5.1 通过web-vitals工具埋点采集真实用户监控数据 —— 中高优先级（支持数据驱动的优化）
- 5.2 通过响应式尺寸和懒加载优化图片 —— 中高优先级（减少40-70%的带宽占用）
- 5.3 通过让出主线程优化Interaction to Next Paint —— 中高优先级（INP从500ms+降低到200ms以内）
- 5.4 通过优先级加载优化Largest Contentful Paint —— 中高优先级（LCP提升200-1000ms）
- 5.5 通过尺寸预留避免Cumulative Layout Shift —— 中高优先级（CLS从0.25+降低到0.1以内）
状态与订阅性能 —— 中高优先级
- 6.1 使用派生状态而非同步状态，避免额外重渲染 —— 中高优先级（消除双重渲染周期）
- 6.2 分离服务端状态和客户端状态管理 —— 中高优先级（减少40%的状态管理代码）
- 6.3 拆分Context隔离高频更新 —— 中高优先级（减少5-50倍的重渲染）
- 6.4 独立响应式值使用原子状态 —— 中高优先级（减少3-10倍的不必要重渲染）
- 6.5 使用基于选择器的订阅实现细粒度更新 —— 中高优先级（仅受影响的组件会重渲染）
性能分析与度量 —— 中优先级
- 7.1 仅使用生产构建做性能 benchmark —— 中优先级（避免开发模式开销导致的误判）
- 7.2 在CI中 enforce 性能预算 —— 中优先级（合入前发现90%的性能问题）
- 7.3 优化前先做性能分析，定位真实瓶颈 —— 中优先级（优化效率提升10倍）
- 7.4 阅读火焰图定位渲染热点路径 —— 中优先级（定位导致80%渲染耗时的具体函数）
- 7.5 使用React性能追踪做渲染分析 —— 中优先级（几分钟内定位渲染瓶颈）
内存管理 —— 中低优先级
- 8.1 避免事件处理器中基于闭包的内存泄漏 —— 中低优先级（避免MB级内存占用）
- 8.2 组件卸载时取消异步操作 —— 中低优先级（避免过时更新和内存占用）
- 8.3 清理Effect避免订阅内存泄漏 —— 中低优先级（避免内存线性增长）
- 8.4 在清理函数中释放重型资源 —— 中低优先级（避免每个资源占用5-50MB内存）
- 8.5 使用堆快照检测组件内存滞留 —— 中低优先级（定位10-100MB的内存增长）

react-optimise

Original

Translation

React Optimise Best Practices

React 优化最佳实践

When to Apply

适用场景

Rule Categories

规则分类

Quick Reference

快速参考

Table of Contents

目录

References

参考资料

Related Skills

相关技能