M
MLOG
React Performance-Optimierung: Die Reduzierung der Bundle-Größe meistern | MLOG | MLOG

Jede Route in diesem Beispiel lädt ihre entsprechende Komponente lazy, was die anfängliche Ladezeit der Anwendung verbessert.

2. Tree-Shaking

Tree-Shaking ist eine Technik, die 'toten Code' aus Ihrer Anwendung entfernt. Toter Code bezieht sich auf Code, der in Ihrer Anwendung nie tatsächlich verwendet wird, aber dennoch im Bundle enthalten ist. Dies geschieht oft, wenn Sie ganze Bibliotheken importieren, aber nur einen kleinen Teil ihrer Funktionalität nutzen.

Moderne JavaScript-Bundler wie Webpack und Rollup können Tree-Shaking automatisch durchführen. Um sicherzustellen, dass Tree-Shaking effektiv funktioniert, ist es wichtig, ES-Module (import- und export-Syntax) anstelle von CommonJS (require-Syntax) zu verwenden. ES-Module ermöglichen es dem Bundler, Ihren Code statisch zu analysieren und festzustellen, welche Exporte tatsächlich verwendet werden.

Beispiel:

Angenommen, Sie verwenden eine Hilfsbibliothek namens lodash. Anstatt die gesamte Bibliothek zu importieren:

            import _ from 'lodash';

_.map([1, 2, 3], (n) => n * 2);

Importieren Sie nur die Funktionen, die Sie benötigen:

            import map from 'lodash/map';

map([1, 2, 3], (n) => n * 2);

Dies stellt sicher, dass nur die map-Funktion in Ihr Bundle aufgenommen wird, was dessen Größe erheblich reduziert.

3. Dynamische Imports

Ähnlich wie bei React.lazy() ermöglichen dynamische Imports (unter Verwendung der import()-Syntax) das Laden von Modulen bei Bedarf. Dies kann nützlich sein, um große Bibliotheken oder Komponenten zu laden, die nur in bestimmten Situationen benötigt werden.

Beispiel:

            async function handleClick() {
  const module = await import('./MyLargeComponent');
  const MyLargeComponent = module.default;
  // MyLargeComponent verwenden
}

In diesem Beispiel wird MyLargeComponent nur geladen, wenn die Funktion handleClick aufgerufen wird, typischerweise als Reaktion auf eine Benutzeraktion.

4. Minifizierung und Komprimierung

Minifizierung entfernt unnötige Zeichen aus Ihrem Code, wie Leerzeichen, Kommentare und ungenutzte Variablen. Komprimierung reduziert die Größe Ihres Codes durch die Anwendung von Algorithmen, die Muster finden und sie effizienter darstellen.

Die meisten modernen Build-Tools wie Webpack, Parcel und Rollup bieten integrierte Unterstützung für Minifizierung und Komprimierung. Webpack verwendet beispielsweise Terser zur Minifizierung und kann für die Komprimierung mit Gzip oder Brotli konfiguriert werden.

Beispiel (Webpack-Konfiguration):

            const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

Diese Konfiguration aktiviert die Minifizierung mit Terser und die Komprimierung mit Gzip. Die Option threshold gibt die Mindestgröße (in Bytes) für eine zu komprimierende Datei an.

5. Bildoptimierung

Bilder können oft einen erheblichen Beitrag zur Bundle-Größe Ihrer Anwendung leisten. Die Optimierung Ihrer Bilder kann die Leistung drastisch verbessern.

Techniken zur Bildoptimierung:

6. Bibliotheken klug auswählen

Bewerten Sie die Bibliotheken, die Sie in Ihrer Anwendung verwenden, sorgfältig. Einige Bibliotheken können recht groß sein, selbst wenn Sie nur einen kleinen Teil ihrer Funktionalität nutzen. Erwägen Sie die Verwendung kleinerer, fokussierterer Bibliotheken, die nur die Funktionen bieten, die Sie benötigen.

Beispiel:

Anstatt eine große Datumsformatierungsbibliothek wie Moment.js zu verwenden, ziehen Sie eine kleinere Alternative wie date-fns oder Day.js in Betracht. Diese Bibliotheken sind deutlich kleiner und bieten eine ähnliche Funktionalität.

Vergleich der Bundle-Größe:

7. HTTP/2

HTTP/2 ist eine neuere Version des HTTP-Protokolls, die mehrere Leistungsverbesserungen gegenüber HTTP/1.1 bietet, darunter:

Die Aktivierung von HTTP/2 auf Ihrem Server kann die Leistung Ihrer React-Anwendung erheblich verbessern, insbesondere beim Umgang mit vielen kleinen Dateien. Die meisten modernen Webserver und CDNs unterstützen HTTP/2.

8. Browser-Caching

Browser-Caching ermöglicht es Browsern, statische Assets (wie Bilder, JavaScript-Dateien und CSS-Dateien) lokal zu speichern. Wenn ein Benutzer Ihre Anwendung erneut besucht, kann der Browser diese Assets aus dem Cache abrufen, anstatt sie erneut herunterzuladen, was die Ladezeiten erheblich reduziert.

Konfigurieren Sie Ihren Server so, dass er entsprechende Cache-Header für Ihre statischen Assets setzt. Der Cache-Control-Header ist der wichtigste. Er ermöglicht es Ihnen anzugeben, wie lange der Browser ein Asset zwischenspeichern soll.

Beispiel:

            Cache-Control: public, max-age=31536000

Dieser Header weist den Browser an, das Asset für ein Jahr zu cachen.

9. Serverseitiges Rendering (SSR)

Serverseitiges Rendering (SSR) beinhaltet das Rendern Ihrer React-Komponenten auf dem Server und das Senden des anfänglichen HTML an den Client. Dies kann die anfängliche Ladezeit und die SEO verbessern, da Suchmaschinen den HTML-Inhalt leicht crawlen können.

Frameworks wie Next.js und Gatsby machen es einfach, SSR in Ihren React-Anwendungen zu implementieren.

Vorteile von SSR:

  • Verbesserte anfängliche Ladezeit: Der Browser erhält vorgerendertes HTML, wodurch er Inhalte schneller anzeigen kann.
  • Bessere SEO: Suchmaschinen können den HTML-Inhalt leicht crawlen, was das Suchmaschinen-Ranking Ihrer Anwendung verbessert.
  • Verbesserte Benutzererfahrung: Benutzer sehen Inhalte schneller, was zu einem ansprechenderen Erlebnis führt.

    • 10. Memoization

    Memoization ist eine Technik zum Cachen der Ergebnisse teurer Funktionsaufrufe und deren Wiederverwendung, wenn dieselben Eingaben erneut auftreten. In React können Sie die Higher-Order-Komponente React.memo() verwenden, um funktionale Komponenten zu memoizen. Dies verhindert unnötige Neu-Renderings, wenn sich die Props der Komponente nicht geändert haben.

    Beispiel:

                import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Komponente rendern
  return 
    {props.data}
    ;
});

export default MyComponent;

    In diesem Beispiel wird MyComponent nur dann neu gerendert, wenn sich die Prop props.data ändert. Sie können auch eine benutzerdefinierte Vergleichsfunktion an React.memo() übergeben, wenn Sie mehr Kontrolle darüber benötigen, wann die Komponente neu gerendert werden soll.

    Praxisbeispiele und internationale Überlegungen

    Die Prinzipien der Reduzierung der Bundle-Größe sind universell, aber ihre Anwendung kann je nach dem spezifischen Kontext Ihres Projekts und der Zielgruppe variieren. Hier sind einige Beispiele:

    Tools und Ressourcen

    Hier sind einige hilfreiche Tools und Ressourcen zur Reduzierung der Bundle-Größe:

    Fazit

    Die Reduzierung der Bundle-Größe ist ein fortlaufender Prozess, der sorgfältige Aufmerksamkeit für Details erfordert. Durch die Implementierung der in diesem Leitfaden beschriebenen Techniken können Sie die Leistung Ihrer React-Anwendung erheblich verbessern und eine bessere Benutzererfahrung liefern. Denken Sie daran, Ihre Bundle-Größe regelmäßig zu analysieren und Bereiche für Optimierungen zu identifizieren. Die Vorteile eines kleineren Bundles – schnellere Ladezeiten, verbessertes Benutzerengagement und eine insgesamt bessere Erfahrung – sind die Mühe wert.

    Da sich die Praktiken der Webentwicklung ständig weiterentwickeln, ist es entscheidend, auf dem neuesten Stand der Techniken und Werkzeuge zur Reduzierung der Bundle-Größe zu bleiben, um leistungsstarke React-Anwendungen zu erstellen, die den Anforderungen eines globalen Publikums gerecht werden.