Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Optimierung von Imports Durch Lazy Loading | Implementierung von React Router in Einer React-App
React Router Grundlagen

bookOptimierung 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 Funktion lazy. Die Funktion lazy erwartet eine Funktion als Argument, welche ein dynamisches Import-Statement zurückgibt. Das Import-Statement importiert die angegebene Datei/das Modul (in diesem Fall View.js) asynchron mit dem Schlüsselwort import. Durch das Umhüllen des Import-Statements mit lazy wird das Lazy Loading der Komponente View.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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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

bookOptimierung 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 Funktion lazy. Die Funktion lazy erwartet eine Funktion als Argument, welche ein dynamisches Import-Statement zurückgibt. Das Import-Statement importiert die angegebene Datei/das Modul (in diesem Fall View.js) asynchron mit dem Schlüsselwort import. Durch das Umhüllen des Import-Statements mit lazy wird das Lazy Loading der Komponente View.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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6
some-alt