Lade React-Komponenten mit lazy() und Suspense nach, teile Routen in React Router auf, verzögere Bilder mit loading="lazy" und vermeide, dass dein Hauptbild langsamer wird. Mit Live-Demo.
Lazy Loading in React heißt, Code oder Bilder erst dann zu laden, wenn sie gebraucht werden. Pack einen dynamischen Import in lazy(), rendere die Komponente in einer Suspense-Grenze mit Fallback, und React lädt sie beim ersten Rendern herunter. Für Bilder erledigt das HTML-Attribut loading="lazy" dasselbe, aber niemals bei deinem Hauptbild im sichtbaren Bereich.
Welches Lazy-Loading-Werkzeug zu welcher Aufgabe passt
Ein großes App-Bundle lässt jeden Besucher auf Code warten, den er vielleicht nie nutzt, etwa ein Diagramm in einem Einstellungs-Tab oder eine Admin-Seite. Lazy Loading teilt diesen Code in separate Dateien auf, die der Browser bei Bedarf lädt. Probier die Demo unten aus und kopiere dann die Muster für Komponenten, Routen, Bilder und Inhalte, die beim Scrollen geladen werden.
Eine Komponente, die du rendern kannst. Ihre Ladefunktion muss ein Promise zurückgeben, das zu einem Objekt aufgelöst wird, dessen default-Eigenschaft eine gültige React-Komponente ist, genau das liefert ein dynamisches import() eines Default-Exports.
Nein. Laut react.dev werden sowohl das zurückgegebene Promise als auch sein aufgelöster Wert gecacht, React ruft die Ladefunktion also nicht mehr als einmal auf. Die Demo auf dieser Seite zeigt, dass das zweite Öffnen sofort passiert.
lazy() erwartet einen Default-Export. Für einen benannten Export bildest du ihn in der Ladefunktion ab: lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).
Ja, beim größten Bild auf dem Bildschirm. web.dev stellte fest, dass Lazy Loading von Bildern im sichtbaren Bereich den Largest Contentful Paint tendenziell verlangsamt und dass Lazy Loading nur für Bilder unterhalb des sichtbaren Bereichs die Datenersparnis ohne diesen Nachteil bringt.
React wirft den Ablehnungsgrund beim Rendern, und die nächste Error Boundary fängt ihn ab. Ohne eine solche entfernt React laut react.dev standardmäßig die UI der App vom Bildschirm.
Das Standardmuster: eine lazy-Deklaration oben in der Datei und eine Suspense-Grenze um die Stelle, an der sie gerendert wird.
Die Diagrammdatei wird erst geladen, wenn showChart zum ersten Mal true wird.
Routenobjekte in React Router nehmen eine lazy-Funktion an, die die Eigenschaften der Route zurückgibt, so wird jede Seite zu einer eigenen Datei.
Die Berichtsseite und ihr Loader werden erst geladen, wenn jemand /reports besucht.
Browser beherrschen Lazy Loading von Bildern nativ. Markiere Bilder unterhalb des sichtbaren Bereichs als lazy und gib dem Hauptbild eine hohe Fetch-Priorität.
Breite und Höhe reservieren den Platz, damit sich nichts verschiebt, wenn das Bild ankommt.
Für Inhalte, die kein Bild sind, etwa eine Karte oder ein Bewertungs-Widget, sagt dir ein kleiner Hook, wann ihr Bereich auf dem Bildschirm erscheint.
Die rootMargin von 200px startet das Laden kurz bevor der Bereich sichtbar ist; sobald er gesehen wurde, trennt sich der Observer.
Dieser Button rendert eine Komponente, die mit lazy() erstellt wurde. Ihr Download dauert beim ersten Mal simuliert 2 Sekunden.
Umsatzdiagramm anzeigen
Umsatzdiagramm ausblenden
Diagrammdatei wird geladen...
Diagrammdatei geladen. Blende es aus und wieder ein: Es erscheint sofort, weil React den ersten Ladevorgang gecacht hat.
Umsatz nach Monat
Kostenlos starten · Keine Kreditkarte nötig