Schnelle Optimierung Ihrer ReactJS-Anwendung hinsichtlich Leistung und Größe

React wird in großem Umfang für Frontend-intensive Anwendungen eingesetzt und bietet einzigartige Möglichkeiten zur Leistungs- und Größenoptimierung. Die Verbesserung beider wird einen erheblichen messbaren Einfluss auf die Größe des React-Paketpakets haben. Je kleiner die Bundle-Größe, desto schneller die Ladezeit, wenn man bedenkt, dass wir uns auf vom Client gerenderte Anwendungen konzentrieren.

Serverseitiges Rendering würde die Ladezeit weiter verbessern. Beim serverseitigen Rendering werden die React-Komponenten als HTML-Code auf dem Server selbst gerendert, wenn ein Benutzer eine Webseite anfordert. Anschließend wird diese vorgerenderte Seite an den Browser gesendet, sodass der Benutzer die Seite sofort sehen kann, ohne den Mehraufwand der JS-Ladezeit.

Aber das ist eine ganz andere Geschichte. Konzentrieren wir uns hauptsächlich auf den Versuch, unsere clientseitig gerenderte Website zu verbessern, indem wir an der Verbesserung der Paketpaketgröße arbeiten, indem wir Änderungen am Code vornehmen. Lass uns tief eintauchen.

1. Codeaufteilung und dynamische Importe

„Bündelung“ von React-Code ist der Prozess, bei dem alle Importe und Codes verfolgt und in einer einzigen Datei namens „Bundle“ zusammengefasst werden. Webpack, Browserify usw. erledigen dies bereits für uns.

Webpack verfügt über eine Funktion namens „Code Splitting“, die dafür verantwortlich ist, ein einzelnes Bundle in kleinere Teile aufzuteilen, die Teile zu deduplizieren und sie „bei Bedarf“ zu importieren. Dies wirkt sich erheblich auf die Ladezeit der Anwendung aus.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Lazy Loading Components with React Suspense (React 18): In Kombination mit dynamischen Importen führt dies zu einer sichtbaren Verbesserung der Komponentenladezeit.

Wenn wir untergeordnete Komponenten innerhalb einer übergeordneten Komponente importieren, importieren wir diese im Allgemeinen statisch. Um den Import dieser Komponente zu verhindern, bis wir sie tatsächlich rendern müssen, können wir eine Kombination aus dynamischen Importen mit React Suspense verwenden. React Suspense ermöglicht das Laden einer Komponente bei Bedarf. Es zeigt eine Fallback-Benutzeroberfläche, während die entsprechenden Komponenten dynamisch importiert und dann gerendert werden.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

2. Baumschütteln

Dies ist eine Technik, die von JavaScript-Bundlern verwendet wird, um den gesamten nicht verwendeten Code zu entfernen, bevor Bundles erstellt werden. ES6-Code kann durcheinander gebracht werden; Code, der auf CommonJS basiert (d. h. „require“ verwendet), kann jedoch nicht im Tree-Shake-Modus ausgeführt werden.

Webpack Bundle Analyzer ist ein Plugin, das Ihnen hilft, die Größe eines Webpacks mit einer interaktiven Karte zu visualisieren.

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer

Konfigurieren Sie dann Ihr Webpack, um das Obige als Plugin hinzuzufügen:

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];

Stellen Sie sicher, dass Ihr Skript für die Ausführung von Webpack konfiguriert ist:

"build": "webpack --config webpack.config.js --mode production"

Führen Sie „garn build“ aus, um eine report.html zu generieren, die Ihnen dabei hilft, Ihre Bündelgröße effektiv zu visualisieren.

Es wird ungefähr so ​​aussehen:

3. Gleichzeitiges Rendern

Beginnen wir damit, zu verstehen, was Blocking Rendering ist. Beim Blockieren des Renderings wird der Hauptthread (UX-Updates) blockiert, weil React einige weniger wichtige Aufgaben im Hintergrund ausgeführt hat. Dies war bis React 16 der Fall.

React 18 hat gleichzeitige Funktionen eingeführt, was bedeutet, dass es Folgendes tun wird:

• Gibt Ihnen mehr Kontrolle darüber, wie Hintergrundaktualisierungen geplant werden, und sorgt für ein reibungsloses Endbenutzererlebnis, indem der Hauptthread nicht blockiert wird.
• Automatisches Stapeln von Statusaktualisierungen initiieren: Beim Stapeln handelt es sich um das Gruppieren mehrerer erneuter Renderings aufgrund mehrerer Statusaktualisierungen, sodass der Status nur einmal aktualisiert wird.

Verwenden Sie den Hook startTransition(), um React-Aktualisierungen als nicht dringend zu verwalten, und helfen Sie React dabei, dringende Aktualisierungen wie Benutzereingaben und Benutzerinteraktionen mit Komponenten gegenüber den vorherigen zu priorisieren.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

In diesem Beispiel wird die handleChange-Funktion aufgerufen, wenn sich der Eingabewert ändert. Die startTransition-Funktion wird verwendet, um die Aktualisierung des Listenstatus als nicht dringend zu markieren. Dadurch kann React die Aktualisierung des Wertstatus priorisieren und sicherstellen, dass die Eingabe auch dann reagiert, wenn die Liste groß ist.

Verwenden Sie den useDeferredValue-Hook, um einen Wert (normalerweise eine teure Berechnung) zu verschieben, bis die Benutzeroberfläche weniger ausgelastet ist.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

In diesem Beispiel wird der Hook „useDeferredValue“ verwendet, um den Wertstatus zu verschieben, bis die Benutzeroberfläche weniger ausgelastet ist. Dies trägt dazu bei, dass die Eingabe reaktionsfähig bleibt, indem das Rendern der großen Liste verschoben wird, bis die Eingabeaktualisierung verarbeitet wurde.

Hauptvorteile des gleichzeitigen Renderns:

• Verbesserte Reaktionsfähigkeit: Indem React die Renderarbeit unterbrechen kann, reagiert die Benutzeroberfläche weiterhin auf Benutzerinteraktionen.
• Priorisierung: React kann dringende Updates gegenüber nicht dringenden priorisieren und so ein reibungsloseres Benutzererlebnis gewährleisten.
• Bessere Leistung: Teure Updates können verschoben werden, wodurch die Auswirkungen auf den Hauptthread verringert und die Gesamtleistung der App verbessert werden.

4. Unterstützen Sie das Vorladen von Ressourcen (React 19)

Wenn Sie wissen, dass Ihre Anwendung beim Laden große Ressourcen abruft, wäre es eine gute Idee, die Ressource vorab zu laden. Diese Ressourcen können Schriftarten, Bilder, Stylesheets usw. sein.

Szenarien, in denen ein Vorladen von Vorteil wäre:

• Eine untergeordnete Komponente würde eine Ressource verwenden. In diesem Fall können Sie es während der Renderphase der übergeordneten Komponente vorab laden.
• Laden Sie es vorab in einen Event-Handler, der zu einer Seite/Komponente weiterleitet, die diese Ressource verwenden würde. Dies ist tatsächlich eine bessere Option, als es während des Renderns vorab zu laden.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Interessante Tatsache: Nach der Implementierung des Vorladens verzeichneten viele Websites, darunter Shopify, Financial Times und Treebo, 1-Sekunden-Verbesserungen bei benutzerzentrierten Kennzahlen wie der Zeit bis zur Interaktion und der vom Benutzer wahrgenommenen Latenz.

Bitte hinterlassen Sie ein Feedback <3

Ich hoffe, Sie fanden diesen Blog hilfreich! Ihr Feedback ist für mich von unschätzbarem Wert , hinterlassen Sie also bitte Ihre Gedanken und Vorschläge in den Kommentaren unten.

Vernetzen Sie sich gerne mit mir auf LinkedIn, um weitere Einblicke und Updates zu erhalten. Bleiben wir in Verbindung und lernen und wachsen wir gemeinsam weiter!

Das obige ist der detaillierte Inhalt vonSchnelle Optimierung Ihrer ReactJS-Anwendung hinsichtlich Leistung und Größe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!