So verbessern Sie die Leistung Ihrer React-App durch Code-Splitting

Da React-Anwendungen immer größer und komplexer werden, kann sich die Größe ihrer JavaScript-Bundles erheblich auf die Leistung auswirken, insbesondere auf langsameren Netzwerken oder Geräten. Eine wirksame Möglichkeit, dieses Problem zu entschärfen, ist die Codeaufteilung, eine Technik, die Ihre Anwendung in kleinere Teile aufteilt. Diese Chunks werden bei Bedarf geladen, wodurch die anfängliche Ladezeit verkürzt und die Gesamtleistung verbessert wird.

In diesem Artikel untersuchen wir, was Code-Splitting ist, warum es wichtig ist und wie man es effektiv in einer React-App implementiert.

Was ist Code-Splitting?
Code-Splitting ist eine Strategie, mit der Sie Ihren JavaScript-Code in kleinere Pakete aufteilen, die bei Bedarf dynamisch geladen werden können. Anstatt eine große JavaScript-Datei an den Browser zu senden, können Sie durch die Codeaufteilung nur die Teile des Codes senden, die für die Interaktion des Benutzers unmittelbar erforderlich sind. Dies verkürzt die anfängliche Ladezeit der App.

React verwendet dynamische Importe und Tools wie Webpack, um die Codeaufteilung zu ermöglichen.

Vorteile der Codeaufteilung

1. Reduzierte anfängliche Ladezeit: Nur kritischer Code wird im Voraus geladen.
2. Verbesserte Leistung: Kleinere Pakete werden schneller geladen, insbesondere in langsamen Netzwerken.
3. Effiziente Ressourcennutzung: Ressourcen werden nach Bedarf geladen, wodurch ungenutzter Code minimiert wird.
4. Bessere Benutzererfahrung: Benutzer erleben schnellere Interaktionen mit Ihrer App.
5. Code-Splitting in React implementieren

1. Verwendung von React.lazy und Suspense von React
React bietet React.lazy zum verzögerten Laden von Komponenten und Suspense zum Anzeigen der Fallback-Benutzeroberfläche, während die verzögert geladenen Komponenten abgerufen werden.

Hier ist ein Beispiel:
Schritt 1: Lazy Load einer Komponente

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

Erklärung:

• React.lazy(() => import('./LazyLoadedComponent')): Importiert die Komponente nur dann dynamisch, wenn sie benötigt wird.
• Laden...

}>: Zeigt die Fallback-Benutzeroberfläche (z. B. einen Lade-Spinner) an, während die Komponente geladen wird.

2. Codeaufteilung nach Routen
Bei größeren Anwendungen ist die Aufteilung des Codes nach Route eine der effektivsten Möglichkeiten, die Leistung zu verbessern. Bibliotheken wie React Router machen diesen Prozess nahtlos.

Schritt 1: React Router installieren

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

Schritt 2: Code-Splitting mit Routen implementieren

npm install react-router-dom

Vorteile:

• Nur ​​das JavaScript für die aktive Route wird geladen.
• Reduziert die Größe des ursprünglichen Pakets.

3. Verwenden der dynamischen Importe von Webpack
Wenn Sie Webpack als Modul-Bundler verwenden, unterstützt es standardmäßig dynamische Importe. Webpack teilt den Code in Blöcke auf, die dynamisch geladen werden können.

So verwenden Sie es in einer React-App:

Beispiel:

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

// Lazy load components for routes
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...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Wie es funktioniert:

• Webpack erstellt einen separaten Block für HeavyComponent.
• Der Chunk wird nur geladen, wenn loadComponent() aufgerufen wird.

4. Analysieren Sie Ihr Bundle mit Webpack Bundle Analyzer
Bevor Sie die Codeaufteilung implementieren, müssen Sie unbedingt verstehen, was zur Größe Ihres Pakets beiträgt. Webpack bietet ein Tool namens Bundle Analyzer, um den Inhalt Ihrer Bundles zu visualisieren.

Schritt 1: Webpack Bundle Analyzer installieren

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

Schritt 2: Webpack konfigurieren
Fügen Sie das Plugin zu Ihrer Webpack-Konfiguration hinzu:

npm install --save-dev webpack-bundle-analyzer

Schritt 3: Analysieren Sie Ihr Paket

Führen Sie den Build-Befehl aus, um den Bericht zu generieren:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

Der Analysator zeigt eine Baumkarte mit der Größe jedes Moduls an und hilft Ihnen, Optimierungsmöglichkeiten zu erkennen.

5. Verwendung von Bibliotheken von Drittanbietern mit Code-Splitting
Große Bibliotheken von Drittanbietern (z. B. lodash, moment.js) können Ihre Bundle-Größe aufblähen. Sie können diese Bibliotheken in separate Blöcke aufteilen oder Tree-Shaking verwenden, um nicht verwendete Teile der Bibliothek zu entfernen.

Beispiel: Dynamischer Import für eine Bibliothek

npm run build

Beispiel für das Schütteln eines Baumes:
Anstatt die gesamte Bibliothek zu importieren:

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('Error loading lodash:', error);
  });

Best Practices für die Codeaufteilung

1. Beginnen Sie mit der routenbasierten Aufteilung: Dies ist der einfachste und effektivste Weg, die anfänglichen Ladezeiten zu verkürzen.
2. Übermäßige Aufteilung vermeiden: Zu viele Blöcke können zu übermäßigen HTTP-Anfragen führen.
3. Kombinieren Sie Code-Splitting mit Lazy Loading: Laden Sie nur das, was für die aktuelle Benutzerinteraktion erforderlich ist.
4. Überwachen Sie die Leistung: Verwenden Sie Tools wie Lighthouse, um Verbesserungen nach der Implementierung der Codeaufteilung zu messen.
5. Verwenden Sie moderne Build-Tools: Tools wie Webpack, Vite und Parcel bieten integrierte Unterstützung für die Codeaufteilung.

Fazit
Code-Splitting ist eine leistungsstarke Optimierungstechnik, die die Leistung Ihrer React-Anwendungen drastisch verbessern kann. Indem Sie Ihre App in kleinere Teile aufteilen und diese bei Bedarf laden, können Sie die anfänglichen Ladezeiten verkürzen, die Benutzererfahrung verbessern und Ihre App effizienter machen.

Beginnen Sie mit der routenbasierten Aufteilung und experimentieren Sie dann mit der Aufteilung auf Komponenten- oder Bibliotheksebene, um die Optimierung an die Anforderungen Ihrer App anzupassen. Kombinieren Sie Code-Splitting mit anderen Leistungstechniken wie Lazy Loading und Tree-Shaking, um die Effizienz Ihrer React-App zu maximieren.

Das obige ist der detaillierte Inhalt vonSo verbessern Sie die Leistung Ihrer React-App durch Code-Splitting. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!