Wie funktionieren Suspense und React.lazy beim Code Splitting?

Question

Accepted Answer

**`React.lazy`** lädt das JavaScript-Bundle einer Komponente **auf Anfrage** (nur bei der ersten Darstellung). **`Suspense`** zeigt eine Fallback-UI an, während eine lazy (oder data-suspending) Kindkomponente noch geladen wird. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Warum es wichtig ist: kleineres initiales Load Ohne Code Splitting lädt der Browser deine **gesamte** App (einschließlich der schweren Chart-Bibliothek) herunter, bevor etwas angezeigt wird. Mit `lazy` wird `Chart`'s Code in seine eigene Datei aufgeteilt und nur geladen, wenn der Benutzer tatsächlich dort ankommt – dies verbessert die initiale Ladezeit und Core Web Vitals. ## Wie Suspense es koordiniert Wenn `Chart` unterbricht (sein Bundle ist nicht bereit), "pausiert" React diesen Teil des Baums und zeigt stattdessen das nächste `Suspense` Fallback, tauscht dann die echte Komponente aus, sobald sie geladen ist. Eine einzelne Grenze kann mehrere lazy Children umhüllen und ein Fallback anzeigen: ```jsx }>

``` ## Jenseits von Code Splitting Suspense koordiniert auch **Datenladen** mit Frameworks/Bibliotheken, die bei einem ausstehenden Fetch "suspendieren", und arbeitet mit **Streaming SSR** (Next.js App Router) zusammen, um eine schnelle Shell zu senden und langsamere Teile zu streamen. Platziere Grenzen durchdacht, um große, störende Layout-Verschiebungen zu vermeiden, wenn Inhalte einblenden.