Suspense 和 React.lazy 如何用于代码分割？

Question

Accepted Answer

**`React.lazy`** 在**需要时**（仅在首次渲染时）加载组件的 JavaScript 包。**`Suspense`** 在任何 lazy（或 data-suspending）子组件仍在加载时显示备用 UI。 ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## 为什么这很重要：更小的初始加载没有代码分割时，浏览器会在显示任何内容之前下载你的**整个**应用（包括笨重的图表库）。使用 `lazy` 时，`Chart` 的代码被分成它自己的文件，只在用户实际到达时才获取——改进初始加载时间和核心网络生命周期。 ## Suspense 如何协调当 `Chart` 被暂停时（其包尚未准备就绪），React "暂停"树的该部分并改为呈现最近的 `Suspense` 备用方案，然后在加载完成后交换真实组件。单个边界可以包装多个 lazy 子项并显示一个备用方案： ```jsx }>

``` ## 超越代码分割 Suspense 还与 frameworks/libraries 协调**数据加载**，这些 frameworks/libraries 在待处理的 fetch 上"暂停"，并与**流式 SSR**（Next.js App Router）配对以发送快速的 shell 并流式传输更慢的部分。谨慎放置边界以避免在内容弹出时出现大型、刺眼的布局偏移。