Optimierung von Imports Durch Lazy Loading
Wie bereits erwähnt, müssen die Komponenten importiert werden, die beim Navigieren zu bestimmten Pfaden in unserer Anwendung gerendert werden. Dafür verwenden wir die Funktion lazy
aus der React-Bibliothek.
Die Syntax zur Verwendung der Funktion lazy zum Importieren einer Komponente ist wie folgt:
import { lazy } from 'react';
const View = lazy(() => import('./View.js'));
Die einzelnen Bestandteile dieser Syntax bedeuten:
- Zeile 1: Importiert die Funktion
lazy
aus der React-Bibliothek. Diese Funktion ermöglicht Code-Splitting und das Lazy Loading von Komponenten; - Zeile 3: Deklariert eine Variable (
View
in diesem Fall) unter Verwendung der Funktionlazy
. Die Funktionlazy
erwartet eine Funktion als Argument, welche ein dynamisches Import-Statement zurückgibt. Das Import-Statement importiert die angegebene Datei/das Modul (in diesem FallView.js
) asynchron mit dem Schlüsselwortimport
. Durch das Umhüllen des Import-Statements mitlazy
wird das Lazy Loading der KomponenteView.js
aktiviert.
Beispiel
Dieses Konzept wird nun auf unser Projekt angewendet, indem die Komponenten für verschiedene Ansichten importiert werden. Zu diesen Ansichten gehören die Startseite, die Über-uns-Seite und die Kontaktseite. Es ist zu beachten, dass diese Ansichten bereits erstellt wurden und unsere aktuelle Aufgabe darin besteht, sie im Routing zu verwenden:
import { lazy } from "react";
const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));
Die Funktion lazy
aus der React-Bibliothek wird verwendet, um die Komponenten für verschiedene Ansichten zu importieren. Jede Komponente wird dynamisch mit dem import
-Statement importiert, wobei die relativen Pfade zu den Komponenten-Dateien angegeben werden (../HomePage/HomePage
, ../AboutPage/AboutPage
, ../ContactsPage/ContactsPage
).
Durch das Importieren dieser Komponenten mittels Lazy Loading wird sichergestellt, dass sie nur bei Bedarf geladen werden. Dies trägt zu einer effizienteren und reaktionsschnelleren Benutzererfahrung bei.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to use these lazy-loaded components in routing?
What happens if there is an error while loading a component?
Can you show how to handle loading states when using lazy components?
Awesome!
Completion rate improved to 4.17
Optimierung von Imports Durch Lazy Loading
Swipe um das Menü anzuzeigen
Wie bereits erwähnt, müssen die Komponenten importiert werden, die beim Navigieren zu bestimmten Pfaden in unserer Anwendung gerendert werden. Dafür verwenden wir die Funktion lazy
aus der React-Bibliothek.
Die Syntax zur Verwendung der Funktion lazy zum Importieren einer Komponente ist wie folgt:
import { lazy } from 'react';
const View = lazy(() => import('./View.js'));
Die einzelnen Bestandteile dieser Syntax bedeuten:
- Zeile 1: Importiert die Funktion
lazy
aus der React-Bibliothek. Diese Funktion ermöglicht Code-Splitting und das Lazy Loading von Komponenten; - Zeile 3: Deklariert eine Variable (
View
in diesem Fall) unter Verwendung der Funktionlazy
. Die Funktionlazy
erwartet eine Funktion als Argument, welche ein dynamisches Import-Statement zurückgibt. Das Import-Statement importiert die angegebene Datei/das Modul (in diesem FallView.js
) asynchron mit dem Schlüsselwortimport
. Durch das Umhüllen des Import-Statements mitlazy
wird das Lazy Loading der KomponenteView.js
aktiviert.
Beispiel
Dieses Konzept wird nun auf unser Projekt angewendet, indem die Komponenten für verschiedene Ansichten importiert werden. Zu diesen Ansichten gehören die Startseite, die Über-uns-Seite und die Kontaktseite. Es ist zu beachten, dass diese Ansichten bereits erstellt wurden und unsere aktuelle Aufgabe darin besteht, sie im Routing zu verwenden:
import { lazy } from "react";
const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));
Die Funktion lazy
aus der React-Bibliothek wird verwendet, um die Komponenten für verschiedene Ansichten zu importieren. Jede Komponente wird dynamisch mit dem import
-Statement importiert, wobei die relativen Pfade zu den Komponenten-Dateien angegeben werden (../HomePage/HomePage
, ../AboutPage/AboutPage
, ../ContactsPage/ContactsPage
).
Durch das Importieren dieser Komponenten mittels Lazy Loading wird sichergestellt, dass sie nur bei Bedarf geladen werden. Dies trägt zu einer effizienteren und reaktionsschnelleren Benutzererfahrung bei.
Danke für Ihr Feedback!