Codeaufteilung mit React.lazy in React

Code-Splitting ist eine Technik zur Optimierung der Leistung von React-Anwendungen durch die Aufteilung des JavaScript-Bundles in kleinere Teile. React bietet React.lazy als integrierte M?glichkeit zur Implementierung der Codeaufteilung auf Komponentenebene. Dadurch k?nnen Sie Teile Ihrer Anwendung dynamisch laden, wenn sie ben?tigt werden.

So funktioniert die Codeaufteilung mit React.lazy

1. Dynamischer Import: Verwendet ES6 import(), um Komponenten dynamisch zu laden.
2. Kleinere Bundles: Zerlegt die App in kleinere Bundles und verkürzt so die anf?ngliche Ladezeit.
3. Asynchrones Laden: L?dt Komponenten nur bei Bedarf asynchron.

Syntax

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

• React.lazy: Importiert dynamisch die angegebene Komponente.
• Suspense: Stellt eine Fallback-Benutzeroberfl?che bereit, w?hrend die Komponente geladen wird.

Beispiel 1: Grundlegende Codeaufteilung mit React.lazy

Ohne Code-Splitting

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

Bei diesem Ansatz wird die gesamte HeavyComponent mit der Haupt-App gebündelt, auch wenn sie nicht sofort ben?tigt wird.

Mit Code-Splitting

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

HeavyComponent wird jetzt nur geladen, wenn es gerendert wird. Dadurch wird die Gr??e des ursprünglichen Pakets reduziert.

Beispiel 2: Codeaufteilung in Routen

Die Codeaufteilung funktioniert nahtlos mit React Router, um Routenkomponenten dynamisch zu laden.

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

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

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

export default App;

Vorteile:

• Jede Routenkomponente (Home, Info, Kontakt) wird nur geladen, wenn auf die entsprechende Route zugegriffen wird.

Beispiel 3: Lazy Loading mehrerer Komponenten

Lazy Load mehrerer Komponenten in einer einzigen App mit logischer Aufteilung.

import React, { Suspense, useState } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

Fehlerbehandlung mit React.lazy

React bietet keine integrierte Fehlerbehandlung für fehlgeschlagene Importe. Sie k?nnen eine Fehlergrenze verwenden, um solche F?lle zu behandeln.

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

Best Practices für die Codeaufteilung

1. Nach Route oder Funktion aufteilen: Teilen Sie Ihre App in logische Abschnitte auf, z. B. Routen oder Hauptfunktionen.
2. Fallbacks minimal halten: Verwenden Sie einfache Fallback-Benutzeroberfl?chen wie Spinner oder Textnachrichten.
3. Bundle-Gr??e überwachen: Verwenden Sie Tools wie Webpack Bundle Analyzer, um gro?e Komponenten zu identifizieren.
4. überm??ige Aufteilung vermeiden: Gleichgewicht zwischen der Anzahl der Bl?cke und der Leistung; Zu viele Bl?cke k?nnen zu mehr HTTP-Anfragen führen.

Tools zur Verbesserung der Codeaufteilung

1. Webpack: Unterstützt dynamische Importe für die Codeaufteilung.
2. Vite: Bietet schnelle Builds und automatische Codeaufteilung.
3. React Router: Erm?glicht eine einfache Integration mit routenbasiertem Lazy Loading.
4. React Loadable: Eine Bibliothek eines Drittanbieters für eine verbesserte Kontrolle über Lazy Loading.

Abschluss

Die Codeaufteilung mit React.lazy ist eine leistungsstarke M?glichkeit, die Leistung Ihrer App zu verbessern. Durch das dynamische Laden von Komponenten k?nnen Sie die anf?ngliche Ladezeit verkürzen und das Benutzererlebnis verbessern. In Kombination mit Suspense und der richtigen Fehlerbehandlung bietet es eine robuste L?sung für die Erstellung effizienter, skalierbarer React-Anwendungen.

Das obige ist der detaillierte Inhalt vonCode-Splitting mit React.lazy: Verbessern Sie die Leistung Ihrer App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!