Code-Splitting mit React.lazy und Suspense

In der modernen Webentwicklung steht die Leistung an erster Stelle. Benutzer erwarten schnell ladende Anwendungen, und eine der effektivsten Strategien, dies zu erreichen, ist die Codeaufteilung. Durch die Codeaufteilung können Sie Ihre Anwendung in kleinere Teile aufteilen und bei Bedarf nur den erforderlichen Code laden. In diesem Artikel wird erläutert, wie Sie die Codeaufteilung in React mithilfe von React.lazy und Suspense implementieren.

Code-Splitting verstehen

Beim Code-Splitting wird Ihre Anwendung in kleinere Pakete aufgeteilt, die bei Bedarf geladen werden können. Dies ist besonders wichtig für große Anwendungen, bei denen der Versand eines einzelnen, umfangreichen JavaScript-Pakets zu langsamen Ladezeiten und einer schlechten Benutzererfahrung führen kann. Durch die Aufteilung Ihres Codes können Sie sicherstellen, dass Benutzer nur dann den Code herunterladen, den sie benötigen, wenn sie ihn benötigen.

Die Rolle der Bündelung

Die meisten React-Anwendungen verwenden Bundler wie Webpack, Rollup oder Browserify, um Dateien in einem einzigen Bundle zusammenzufassen. Obwohl die Bündelung effizient ist, kann sie bei wachsender Anwendung zu großen Dateigrößen führen. Die Codeaufteilung hilft, dieses Problem zu mildern, indem sie es Ihnen ermöglicht, nur die notwendigen Teile Ihrer Anwendung zu laden.

Dynamische Importe

Die dynamische import()-Syntax ist die Grundlage der Codeaufteilung in JavaScript. Es ermöglicht das asynchrone Laden von Modulen, was für die Implementierung der Codeaufteilung in React von entscheidender Bedeutung ist.

// Before code splitting
import { add } from './math';

console.log(add(16, 26));

// After code splitting
import("./math").then(math => {
  console.log(math.add(16, 26));
});

Bei Verwendung von import() erstellt der Bundler automatisch separate Blöcke für die importierten Module.

Verwenden von React.lazy

React bietet eine integrierte Möglichkeit, die Codeaufteilung auf Komponentenebene über React.lazy zu implementieren. Mit dieser Funktion können Sie eine Komponente definieren, die dynamisch geladen wird.

Beispiel:

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
);

In diesem Beispiel wird AvatarComponent nur geladen, wenn DetailsComponent gerendert wird, wodurch die anfängliche Ladezeit verkürzt wird.

Spannung einführen

Während React.lazy das Laden von Komponenten übernimmt, verwaltet es nicht den Ladezustand. Hier kommt Suspense ins Spiel. Mit Suspense können Sie eine Fallback-Benutzeroberfläche definieren, die angezeigt wird, während die verzögert geladene Komponente abgerufen wird.

Beispiel:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
);

In diesem Beispiel wird dem Benutzer beim Laden von AvatarComponent die Meldung „Laden...“ angezeigt. Dies verbessert das Benutzererlebnis, indem es während des Ladevorgangs Feedback gibt.

Umgang mit mehreren Komponenten

Suspense kann auch mehrere Lazy-Loaded-Komponenten gleichzeitig verwalten. Dies ist nützlich, um die Anzahl der dem Benutzer angezeigten Ladeindikatoren zu reduzieren.

Beispiel:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
  </Suspense>
);

In diesem Fall werden beide Komponenten zusammen geladen und der Benutzer sieht eine einzelne Ladeanzeige, bis beide bereit sind.

Fehlergrenzen

Beim Umgang mit verzögert geladenen Komponenten ist es wichtig, potenzielle Ladefehler zu bewältigen. React stellt hierfür durch Fehlergrenzen ein Muster bereit. Eine Fehlergrenze kann Fehler beim Rendern abfangen und eine Fallback-Benutzeroberfläche anzeigen.

Beispiel:

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }
    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<p>Loading...</p>}>
      <AvatarComponent />
    </Suspense>
  </ErrorBoundary>
);

Wenn in diesem Beispiel AvatarComponent nicht geladen werden kann, wird dem Benutzer eine benutzerfreundliche Fehlermeldung anstelle einer fehlerhaften Benutzeroberfläche angezeigt.

Routenbasierte Codeaufteilung

Eine der effektivsten Stellen zum Implementieren der Codeaufteilung ist die Routenebene. Dies ist besonders nützlich bei Single-Page-Anwendungen (SPAs), bei denen unterschiedliche Routen unterschiedliche Komponenten laden können.

Beispiel:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

In diesem Beispiel werden die Home- und About-Komponenten nur geladen, wenn auf ihre jeweiligen Routen zugegriffen wird, wodurch die anfängliche Ladezeit optimiert wird.

Abschluss

Code-Splitting ist eine leistungsstarke Technik, die die Leistung Ihrer React-Anwendungen erheblich verbessern kann. Durch die Verwendung von React.lazy und Suspense können Sie die Codeaufteilung einfach auf Komponentenebene implementieren und so sicherstellen, dass Benutzer nur den Code herunterladen, den sie benötigen. Dies verbessert nicht nur die Ladezeiten, sondern verbessert auch das gesamte Benutzererlebnis.

Überlegen Sie bei der Entwicklung Ihrer React-Anwendungen, wo Sie die Codeaufteilung anwenden können, um die Leistung zu optimieren. Beginnen Sie mit der streckenbasierten Aufteilung und identifizieren Sie große Komponenten, die bei Bedarf geladen werden können. Mit diesen Strategien können Sie schnelle, effiziente Anwendungen erstellen, die Ihre Benutzer begeistern.

Folgen Sie mir für weitere Einblicke in React, TypeScript und moderne Webentwicklungspraktiken!?‍?

Das obige ist der detaillierte Inhalt vonCode-Splitting mit React.lazy und Suspense. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!