React优化最佳实践指南：43条规则提升应用性能与打包体积

react-optimise by pproenca/dot-skills

91 周安装量

96 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/pproenca/dot-skills --skill react-optimise

React 性能优化前端架构

🇨🇳中文介绍

React 优化最佳实践

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

适用场景

优化 React 应用程序性能或打包体积
采用或排查 React Compiler v1.0 问题
拆分打包文件并配置代码分割
改善核心 Web 指标（INP、LCP、CLS）
分析渲染性能并识别瓶颈
修复长期运行的单页应用程序中的内存泄漏
优化数据获取模式并消除瀑布式加载

规则类别

类别	影响程度	规则数量	关键主题
React 编译器精通	关键	6	编译器友好代码、跳出检测、渐进式采用
打包与加载	关键	6	路由分割、桶文件消除、动态导入、预取
渲染优化	高	6	虚拟化、子组件模式、防抖、CSS 包含块
数据获取性能	高	5	瀑布式加载消除、路由预加载、SWR、去重
核心 Web 指标

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

React Optimise Best Practices

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).

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

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

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)

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 — CRITICAL (50-90% dead code elimination in dependencies)

References

Related Skills

For React 19 API best practices, see react skill
For Next.js App Router optimization, see nextjs-16-app-router skill
For client-side form handling, see react-hook-form skill

Weekly Installs

Repository

pproenca/dot-skills

GitHub Stars

First Seen

Feb 12, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

github-copilot74

codex74

opencode74

gemini-cli73

kimi-cli71

cursor71

GSAP React 动画库使用指南：useGSAP Hook 与最佳实践

3,400 周安装

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优化最佳实践指南：43条规则提升应用性能与打包体积

🇨🇳中文介绍

React 优化最佳实践

适用场景

规则类别

相关 Skills

快速参考

目录

参考资料

相关技能