Deutsch

Ermöglichen Sie schnellere Ladezeiten und eine verbesserte Leistung Ihrer React-Anwendungen durch Lazy Loading und Komponenten-Code-Splitting. Lernen Sie praktische Techniken und Best Practices.

React Lazy Loading: Komponenten-Code-Splitting für optimierte Leistung

In der heutigen schnelllebigen digitalen Welt ist die Leistung von Websites von größter Bedeutung. Benutzer erwarten sofortige Ergebnisse, und langsame Ladezeiten können zu Frustration, abgebrochenen Warenkörben und einem negativen Markenimage führen. Bei React-Anwendungen ist die Optimierung der Leistung entscheidend, um eine reibungslose und ansprechende Benutzererfahrung zu bieten. Eine leistungsstarke Technik, um dies zu erreichen, ist Lazy Loading mit Komponenten-Code-Splitting.

Was ist Lazy Loading und Code Splitting?

Lazy Loading ist eine Technik, bei der Ressourcen wie Bilder, Skripte und Komponenten erst dann geladen werden, wenn sie benötigt werden, anstatt alle auf einmal beim anfänglichen Laden der Seite. Dies reduziert die Menge an Daten, die im Voraus heruntergeladen und analysiert werden müssen, erheblich, was zu schnelleren Ladezeiten und einer besseren wahrgenommenen Leistung führt.

Code Splitting ist der Prozess, den Code Ihrer Anwendung in kleinere, überschaubarere Teile (oder Bundles) aufzuteilen. Dies ermöglicht es dem Browser, nur den für die erste Ansicht notwendigen Code herunterzuladen und das Laden anderen Codes aufzuschieben, bis er tatsächlich benötigt wird. Lazy Loading nutzt Code Splitting, um bestimmte Komponenten erst dann zu laden, wenn sie gerendert werden sollen.

Warum Lazy Loading und Code Splitting in React verwenden?

Hier sind die Gründe, warum Sie die Integration von Lazy Loading und Code Splitting in Ihre React-Projekte in Betracht ziehen sollten:

Wie man Lazy Loading in React implementiert

React bietet integrierte Unterstützung für Lazy Loading mit den Komponenten React.lazy und Suspense. Hier ist eine schrittweise Anleitung:

1. Verwendung von React.lazy()

React.lazy() ermöglicht den dynamischen Import von Komponenten, wodurch Ihr Code effektiv in separate Teile aufgeteilt wird. Es benötigt eine Funktion, die import() aufruft, welches ein Promise zurückgibt, das in die Komponente aufgelöst wird.


const MyComponent = React.lazy(() => import('./MyComponent'));

In diesem Beispiel wird MyComponent erst geladen, wenn es gerendert werden soll.

2. Umschließen mit <Suspense>

Da React.lazy() dynamische Importe verwendet, die asynchron sind, müssen Sie die per Lazy Loading geladene Komponente mit einer <Suspense>-Komponente umschließen. Die <Suspense>-Komponente ermöglicht es Ihnen, eine Fallback-Benutzeroberfläche (z. B. einen Lade-Spinner) anzuzeigen, während die Komponente geladen wird.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Laden...
}> ); }

In diesem Beispiel wird die Nachricht Laden... angezeigt, während MyComponent geladen wird. Sobald die Komponente geladen ist, ersetzt sie die Fallback-Benutzeroberfläche.

3. Praxisbeispiel: Lazy Loading einer großen Bildergalerie

Stellen wir uns ein Szenario vor, in dem Sie eine große Bildergalerie haben. Das Laden aller Bilder auf einmal kann die Leistung erheblich beeinträchtigen. So können Sie die Bilder mit React.lazy() und <Suspense> per Lazy Loading laden:


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Bild 1' },
    { id: 2, src: 'image2.jpg', alt: 'Bild 2' },
    { id: 3, src: 'image3.jpg', alt: 'Bild 3' },
    // ... weitere Bilder
  ];

  return (
    
{images.map(image => ( Lade Bild...
}> ))} ); } export default ImageGallery;

Und die Image.js-Komponente:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

In diesem Beispiel wird jedes Bild in eine <Suspense>-Komponente gehüllt, sodass für jedes Bild eine Lade-Nachricht angezeigt wird, während es geladen wird. Dies verhindert, dass die gesamte Seite blockiert wird, während die Bilder heruntergeladen werden.

Fortgeschrittene Techniken und Überlegungen

1. Fehlergrenzen (Error Boundaries)

Bei der Verwendung von Lazy Loading ist es wichtig, potenzielle Fehler zu behandeln, die während des Ladevorgangs auftreten können. Fehlergrenzen (Error Boundaries) können verwendet werden, um diese Fehler abzufangen und eine Fallback-Benutzeroberfläche anzuzeigen. Sie können eine Fehlergrenz-Komponente wie folgt erstellen:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // State aktualisieren, damit das nächste Rendering die Fallback-UI anzeigt.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Sie können den Fehler auch an einen Fehlerberichts-Dienst protokollieren
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Sie können jede beliebige benutzerdefinierte Fallback-UI rendern
      return 

Etwas ist schiefgelaufen.

; } return this.props.children; } } export default ErrorBoundary;

Umschließen Sie dann die <Suspense>-Komponente mit der <ErrorBoundary>:



  Laden...}>
    
  


Wenn beim Laden von MyComponent ein Fehler auftritt, fängt die <ErrorBoundary> ihn ab und zeigt die Fallback-Benutzeroberfläche an.

2. Server-Side Rendering (SSR) und Lazy Loading

Lazy Loading kann auch in Verbindung mit Server-Side Rendering (SSR) verwendet werden, um die anfängliche Ladezeit Ihrer Anwendung zu verbessern. Es erfordert jedoch einige zusätzliche Konfiguration. Sie müssen sicherstellen, dass der Server dynamische Importe korrekt verarbeiten kann und dass die per Lazy Loading geladenen Komponenten auf der Client-Seite ordnungsgemäß hydriert werden.

Tools wie Next.js und Gatsby.js bieten integrierte Unterstützung für Lazy Loading und Code Splitting in SSR-Umgebungen, was den Prozess erheblich vereinfacht.

3. Vorabladen von Lazy-Loaded-Komponenten

In einigen Fällen möchten Sie möglicherweise eine per Lazy Loading geladene Komponente vorab laden, bevor sie tatsächlich benötigt wird. Dies kann nützlich sein für Komponenten, die wahrscheinlich bald gerendert werden, wie z. B. Komponenten, die sich unterhalb des sichtbaren Bereichs (below the fold) befinden, aber wahrscheinlich in den sichtbaren Bereich gescrollt werden. Sie können eine Komponente vorab laden, indem Sie die import()-Funktion manuell aufrufen:


import('./MyComponent'); // MyComponent vorab laden

Dadurch wird das Laden der Komponente im Hintergrund gestartet, sodass sie schneller verfügbar ist, wenn sie tatsächlich gerendert wird.

4. Dynamische Importe mit Webpack Magic Comments

Die "Magic Comments" von Webpack bieten eine Möglichkeit, die Namen der generierten Code-Chunks anzupassen. Dies kann beim Debuggen und Analysieren der Bundle-Struktur Ihrer Anwendung hilfreich sein. Zum Beispiel:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Dadurch wird ein Code-Chunk mit dem Namen "my-component.js" (oder ähnlich) anstelle eines generischen Namens erstellt.

5. Häufige Fallstricke vermeiden

Praxisbeispiele und Anwendungsfälle

Lazy Loading kann in einer Vielzahl von Szenarien angewendet werden, um die Leistung von React-Anwendungen zu verbessern. Hier sind einige Beispiele:

Beispiel: Internationale E-Commerce-Website

Stellen Sie sich eine E-Commerce-Website vor, die Produkte weltweit verkauft. Verschiedene Länder können unterschiedliche Währungen, Sprachen und Produktkataloge haben. Anstatt alle Daten für jedes Land im Voraus zu laden, können Sie Lazy Loading verwenden, um die für den Standort des Benutzers spezifischen Daten erst dann zu laden, wenn er die Seite besucht.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funktion zur Bestimmung des Benutzerlandes

  return (
    Lade Inhalte für Ihre Region...}>
      
      
    
  );
}

Fazit

Lazy Loading und Komponenten-Code-Splitting sind leistungsstarke Techniken zur Optimierung der Leistung von React-Anwendungen. Indem Sie Komponenten nur bei Bedarf laden, können Sie die anfängliche Ladezeit erheblich verkürzen, die Benutzererfahrung verbessern und Ihre SEO stärken. Die in React integrierten Komponenten React.lazy() und <Suspense> machen die Implementierung von Lazy Loading in Ihren Projekten einfach. Nutzen Sie diese Techniken, um schnellere, reaktionsfähigere und ansprechendere Webanwendungen für ein globales Publikum zu erstellen.

Denken Sie daran, bei der Implementierung von Lazy Loading immer die Benutzererfahrung zu berücksichtigen. Stellen Sie informative Fallback-Benutzeroberflächen bereit, behandeln Sie potenzielle Fehler elegant und analysieren Sie die Leistung Ihrer Anwendung sorgfältig, um sicherzustellen, dass Sie die gewünschten Ergebnisse erzielen. Scheuen Sie sich nicht, mit verschiedenen Ansätzen zu experimentieren und die beste Lösung für Ihre spezifischen Anforderungen zu finden.