Komponenten Mit Lazy Loading Importieren

Wie bereits erwähnt, müssen wir die Komponenten importieren, die gerendert werden, wenn ein Benutzer zu bestimmten Pfaden in unserer Anwendung navigiert. Um dies zu erreichen, verwenden wir die Funktion lazy aus der React-Bibliothek.

Die Syntax zur Verwendung der lazy-Funktion zum Importieren einer Komponente ist wie folgt:

Hier ist, was jeder Teil dieser Syntax macht:

• Zeile 1: Importiert die lazy-Funktion aus der React-Bibliothek. Diese Funktion ermöglicht Code-Splitting und Lazy Loading von Komponenten;
• Zeile 3: Deklariert eine Variable (View in diesem Fall) unter Verwendung der lazy-Funktion. Die lazy-Funktion nimmt eine Funktion als Argument, und diese Funktion gibt eine dynamische Importanweisung zurück. Die Importanweisung importiert asynchron die angegebene Datei/das Modul (in diesem Fall View.js) unter Verwendung des import-Schlüsselworts. Durch das Umwickeln der Importanweisung mit lazy ermöglichen wir das Lazy Loading der View.js-Komponente.

Beispiel

Wenden wir dieses Konzept auf unser Projekt an, indem wir die Komponenten für verschiedene Ansichten importieren. Diese Ansichten umfassen die Startseite, die Über-Seite und die Kontaktseite. Es ist wichtig zu beachten, dass diese Ansichten bereits erstellt wurden und unsere aktuelle Aufgabe darin besteht, sie in unserem Routing zu nutzen:

Wir verwenden die lazy-Funktion aus der React-Bibliothek, um die Komponenten für verschiedene Ansichten zu importieren. Jede Komponente wird dynamisch mit der import-Anweisung importiert, und wir geben die relativen Pfade zu den Komponenten-Dateien an (../HomePage/HomePage, ../AboutPage/AboutPage, ../ContactsPage/ContactsPage).

Durch das Importieren dieser Komponenten mit Lazy Loading stellen wir sicher, dass sie nur bei Bedarf geladen werden, was zu einer effizienteren und reaktionsschnelleren Benutzererfahrung beiträgt.