Aus dem Kurs: React Grundkurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.
Lazy-Loading mit Suspense – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
Lazy-Loading mit Suspense
Ich will Ihnen nun zeigen, wie Sie Ihre React Components nachladen können. Das nennt sich Lazy Loading. Wenn Sie am Ende Ihre App Production Ready machen, mit "npm run build", dann wird im besten Fall daraus ein hoch optimierter Code erzeugt. Es bleibt aber eine automatische Optimierung. Wenn Sie von vornherein schon wissen, dass manch großes Komponenten nur unter bestimmten Bedingungen genutzt werden, könnten Sie das explizit optimieren. In unserer Routing-App habe ich den Network Inspector geöffnet. Dort klicke ich nun "Disable cache" an. Dann lade ich die Seite neu. Wir sehen, dass genau ein Bundle geladen wurde, dieses Bundle hat die Größe 338 Kilobyte. Wenn wir durch die Seite navigieren, so sehen wir, keine weiteren JavaScript-Dateien werden nachgeladen. Das kann nun erst mal gut oder schlecht sein. Wir können das Nachladen von Components aber erzwingen und sie damit aus dem Hauptbundle rausschmeißen. Das machen wir nun mit der SinglePhoto-Component. Am wenigsten Aufwand…
Laden Sie Kurse herunter und lernen Sie auch unterwegs.
Sehen Sie sich Kurse auf Ihrem Mobilgerät ohne Internetverbindung an. Laden Sie Kurse mit der LinkedIn Learning-App für iOS oder Android herunter.