Routenbasierte und komponentenbezogene Aufteilung
Teilen Sie nach Route (Bildschirmebene) und innerhalb von Bildschirmen (Widget-Ebene) auf. Verwenden Sie Suspense nahe am langsamen Bereich, damit der Rest interaktiv bleibt.
Routenbasierte und komponentenbezogene Aufteilung ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Zwei Ebenen: Route und Widget
Ziel: Teilen Sie Routen (ganze Bildschirme) und Widgets (aufwendige Bereiche innerhalb eines Bildschirms) auf. Halten Sie Fallbacks lokal, damit die Seite nutzbar bleibt.
Wo Sie aufteilen sollten und warum
- Routenbasiert: Teilen Sie große Seiten auf
- Auf Komponentenebene: Teilen Sie Diagramme oder Editoren auf
- Platzieren Sie Suspense direkt am langsamen Bereich
Demo: Aufteilung nach Routen
Routenbasiert: Nur der Tab Reports wird verzögert geladen; die anderen Tabs werden sofort gerendert.
<div id="root"></div>
Demo: Aufteilung auf Widget-Ebene
Auf Komponentenebene: Laden Sie ein aufwendiges Chart-Widget verzögert; das Seiten-Grundgerüst wird sofort gerendert.
<div id="root"></div>
Demo: Vorladen beim Überfahren
Vorladen bei erwarteter Absicht: Beginnen Sie mit dem Laden, wenn der Benutzer den Button überfährt, damit sich der Klick sofort anfühlt.
<div id="root"></div>
Tipps und Fallstricke
- Vermeiden Sie eine einzige große Boundary; halten Sie sie lokal
- Passen Sie die Größe des Fallbacks an die endgültige UI an
- Teilen Sie nach Benutzerabläufen (Routen) und aufwendigen Widgets auf, nicht nach jeder winzigen Komponente
Prüfung: Strategie für Code-Splitting
Zusammenfassung
Zusammenfassung: Teilen Sie große Bildschirme (Routen) und aufwendige Widgets auf. Umschließen Sie jeden langsamen Bereich mit einer eigenen Suspense-Boundary und einem kleinen Fallback; laden Sie bei erwarteter Absicht vor, damit sich Klicks schneller anfühlen.
Häufig gestellte Fragen
Ist die Lektion „Routenbasierte und komponentenbezogene Aufteilung“ kostenlos?
Ja — der vollständige Text von „Routenbasierte und komponentenbezogene Aufteilung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Routenbasierte und komponentenbezogene Aufteilung“?
Teilen Sie nach Route (Bildschirmebene) und innerhalb von Bildschirmen (Widget-Ebene) auf. Verwenden Sie Suspense nahe am langsamen Bereich, damit der Rest interaktiv bleibt. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Routenbasierte und komponentenbezogene Aufteilung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- React.lazy und Suspense – Lazy-Komponenten
- Routenbasierte und komponentenbezogene Aufteilung
- Bundles, Cache und Hinweise zum Vorabladen