一张图讲透 12 个 React 性能优化概念:代码分割到真机测试

_jaydeepkarale · x · 2026-10-16

一张广为流传的信息图总结了让 React 应用变快的 12 个概念，按三类组织：少发代码（React.lazy 代码分割、先跑 analyzer 定 bundle 预算、仅用 ESM 做 tree shaking、AVIF 图片与 LCP eager 加载）、释放主线程（用 React Compiler 1.0 做有依据的记忆化、列表虚拟化只渲染屏幕内的 20 条、重活交给 Web Workers、按暂停或帧做防抖节流）、聪明加载再度量（按意图并行预取路由和数据、只在叶子组件用 'use client' 做 SSR 首屏、盯 LCP/INP/CLS 指标、限流 CPU 和网络在真机测试）。图末点睛：没有前后对比数字的优化都只是猜测。