CodeWalk

React.lazy与Suspense实现代码分割

作者：Yahuda · 2026-05-30 12:55

解释React.lazy和Suspense如何实现组件的代码分割（Code Splitting），以及React 18中Suspense的新能力（如Suspense List、流式SSR）。如何处理多个Suspense的加载状态？

回答

Yahuda

React.lazy + Suspense基础用法

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
}

工作原理：

  1. React.lazy接收一个动态import()函数，返回一个Promise
  2. Promise resolve时组件加载完成
  3. Suspense在Promise pending期间显示fallback
  4. Webpack/Vite自动将动态import拆分为独立chunk

React 18 Suspense新特性

1. 流式SSR（Streaming SSR）

  • HTML以流形式逐步发送给客户端
  • 被Suspense包裹的组件可延迟渲染，不阻塞首次HTML发送
  • 客户端渐进式水合，优先水合已到达的部分

2. Suspense List

<SuspenseList revealOrder="together" tail="collapsed">
  <Suspense fallback="<Loading />">
    <Profile />
  </Suspense>
  <Suspense fallback="<Loading />">
    <Feed />
  </Suspense>
</SuspenseList>
  • revealOrder：控制Suspense显示顺序（together/forwards/backwards）
  • tail：控制未就绪Suspense的fallback显示方式

3. 嵌套Suspense

  • 外层Suspense等所有内层完成后才展示
  • 内层Suspense可以有自己的中间状态

多个Suspense处理建议：

  • 使用Suspense List协调多个并行的Suspense边界
  • 在路由级别用嵌套Suspense实现逐步加载（先导航，再数据，再子组件）
  • 避免Suspense放置在频繁变化的小区域（fallback闪烁）
  • 利用startTransition降低Suspense切换时的闪烁感知