Hvordan fungerer Suspense og React.lazy til kodeopsplitning?

Question

Accepted Answer

**`React.lazy`** indlæser en komponents JavaScript-bundle **efter behov** (kun når den først renderes). **`Suspense`** viser en fallback-UI, mens en hvilken som helst lazy (eller data-suspending) underordnet komponent stadig indlæses. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Hvorfor det betyder noget: mindre indledende belastning Uden kodeopsplitning downloader browseren din **hele** app (herunder det tunge diagrambibliotek), før der vises noget som helst. Med `lazy` opdeles `Chart`'s kode i en egen fil og hentes kun, når brugeren faktisk når dertil — hvilket forbedrer indledende indlæsningstid og Core Web Vitals. ## Hvordan Suspense koordinerer det Når `Chart` suspenderes (dens bundle er ikke klar), "pauser" React den del af træet og viser den nærmeste `Suspense` fallback i stedet, og bytter derefter til den rigtige komponent, når den indlæses. En enkelt grænse kan ombryde flere lazy børn og vise en fallback: ```jsx }>

``` ## Ud over kodeopsplitning Suspense koordinerer også **dataloading** med frameworks/biblioteker, der "suspenderer" på en afventende fetch, og parrer med **streaming SSR** (Next.js App Router) for at sende et hurtigt shell og streame langsommere dele ind. Placer grænser omtænksomt for at undgå store, upassende layoutskift, når indholdet popper ind.