Hur fungerar Suspense och React.lazy för koduppdelning?

Question

Accepted Answer

**`React.lazy`** laddar en komponents JavaScript-paket **on demand** (bara när den först renderas). **`Suspense`** visar ett fallback-gränssnitt medan någon lazy (eller data-suspending) underordnad komponent fortfarande laddar. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Varför det spelar roll: mindre initial laddning Utan koduppdelning laddar webbläsaren din **hela** app (inklusive det tunga diagrambiblioteket) innan något visas. Med `lazy` är `Chart`s kod uppdelad i sin egen fil och hämtas bara när användaren faktiskt når den — vilket förbättrar initial laddningstid och Core Web Vitals. ## Hur Suspense koordinerar det När `Chart` suspenderas (dess paket är inte klart), "pausar" React den delen av trädet och renderar istället det närmaste `Suspense` fallback-gränssnittet, och byter sedan in den verkliga komponenten när den laddar. En enda gräns kan omsluta flera lazy-underordnade och visa ett fallback: ```jsx }>

``` ## Bortom koduppdelning Suspense koordinerar också **datainladdning** med ramverk/bibliotek som "suspenderar" på en väntande fetch, och parar ihop med **streaming SSR** (Next.js App Router) för att skicka ett snabbt skal och strömma långsammare delar. Placera gränser noggrant för att undvika stora, skakiga layoutförskjutningar när innehåll dyker upp.