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!