Leitfaden für Lazy Loading mit React

Einleitung

Bei der Entwicklung großer React-Anwendungen verwenden wir normalerweise viele Bilder und Videos, installieren Pakete/Bibliotheken von Drittanbietern, führen API-Aufrufe durch und erledigen eine Vielzahl anderer Dinge. Das erhöht natürlich die Zeit, die zum Laden unserer Anwendung benötigt wird, und führt zu einer enormen Paketgröße, die zu einer schlechten Benutzererfahrung beiträgt. Das ist wo faul laden kommt an Ort und Stelle. Es ermöglicht uns, den Inhalt zu laden gerade rechtzeitig, kurz bevor es in der Anwendung angezeigt wird.

Wir können vermeiden, Inhalte vorab zu laden, während sie noch nicht sichtbar sind, und alle Ressourcen auf die Inhalte konzentrieren, die sich in der Ansicht befinden.

In diesem Handbuch sehen wir uns die Verwendung an React.lazy() und React.Suspense zum Implementieren von Lazy-Loading- und Code-Splitting-Funktionen, die es uns ermöglichen, Code-Splitting zu handhaben, ohne dass zusätzliche Bibliotheken installiert werden müssen.

Was ist Lazy Loading?

Wenn wir eine React-Webanwendung starten, bündelt sie normalerweise die gesamte Anwendung auf einmal und lädt alles, einschließlich der gesamten Webanwendungsseiten, Bilder, Inhalte und vieles mehr, für uns, was möglicherweise zu einer langsamen Ladezeit und einer insgesamt schlechten Leistung führt, je nachdem die Größe des Inhalts und die Internetbandbreite zu diesem Zeitpunkt.

Faules Laden ermöglicht es uns, bestimmte Komponenten nur dann zu laden, wenn sie benötigt werden. In der Regel treten wir auch auf Code-Aufteilung in logische Komponenten, die auch faul mit dem Inhalt geladen werden können.

Wenn wir beispielsweise eine Dashboard-Seite haben, die beim Klicken viele Informationen aus verschiedenen Quellen anzeigt, ist es immer am besten, diese Komponenten und Seiten verzögert zu laden, damit sie nur geladen werden, wenn sie vom Benutzer benötigt oder angefordert werden.

Hinweis: Der Vorgang des Aufteilens eines großen Codebündels in mehrere Bündel, die dynamisch geladen werden können, mit dem übergeordneten Ziel, Leistungsprobleme im Zusammenhang mit übergroßen Bündeln zu vermeiden, wird als bezeichnet Code-Aufteilung. Dies wird erreicht, ohne die Menge an Code in unserer App zu reduzieren.

Zusammenfassend lässt sich sagen, dass Lazy Loading es uns ermöglicht, Komponenten oder Elemente nach Bedarf zu rendern, wodurch unsere App effizienter wird und eine bessere Benutzererfahrung bietet.

Hinweis: Single-Page-Apps (SPAs) sind so konzipiert, dass sie alle Seiten und Inhalte in einem einzigen Dokument/Seite enthalten. Aus diesem Grund ist Lazy Loading besonders praktisch bei der Entwicklung von SPAs.

So implementieren Sie Lazy Loading in React

Bisher haben wir gesehen, was Lazy Loading ist und warum es wichtig ist, es zu implementieren. Schauen wir uns nun an, wie wir es in unseren React-Anwendungen implementieren können, indem wir zwei React-Funktionen verwenden, die Code-Splitting und Lazy Loading einfach implementieren – Reagieren. faul () und Reagieren.Spannung.

React.lazy() ist eine Funktion, mit der wir rendern können dynamische Importe auf die gleiche Weise wie normale Komponenten. Die Verwendung dynamischer Importe neben der React.lazy() ermöglicht es uns, eine Komponente zu importieren, kurz bevor sie auf einem Bildschirm gerendert wird. Eine wichtige Sache zu beachten ist das React.lazy() akzeptiert eine Funktion als Argument – ​​diese Funktion muss die Dynamik aufrufen import() in seinem Körper.

React.Suspense ermöglicht es uns, den Fallback festzulegen Knebel die einen Platzhalterinhalt aufnimmt, der als verwendet würde Ladeanzeige während alle faulen Komponenten geladen werden.

Beginnen wir damit, uns anzusehen, wie wir verzögertes Laden in unseren importierten Komponenten implementieren können, und wie wir es dann in unseren Routen implementieren können, sodass Seiten nicht geladen werden, bis wir zu ihnen navigieren.

Erste Schritte

Angenommen, wir haben unsere React-Anwendung und wir haben die importiert About Komponente in die Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Wir können jetzt Lazy Loading implementieren, indem wir verwenden React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Hinweis: React.lazy() Auf diese Weise verwendet, gibt a zurück Promise Objekt. Dieses Versprechen löst sich in ein Modul auf, das eine React-Komponente enthält, in die wir faul laden wollen default Export.

Wir haben Lazy Loading mit implementiert React.lazy(), aber der obige Code wird immer eine auslösen Fehler sagen, dass unsere “React component suspended while rendering, but no fallback UI was specified”. Dies kann behoben werden, indem das Bauteil mit umwickelt wird React.Suspense's fallbackz und Anbringen der Fallback-Requisiten, wie wir zuvor erklärt haben:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Hinweis: Die Fallback-Prop kann eine Komponente annehmen, die angezeigt wird, bevor der ursprüngliche Inhalt geladen wird.

Darüber hinaus können wir uns entscheiden destrukturieren den React-Import, um den Code sauberer und lesbarer zu machen:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Bisher haben wir gesehen, wie wir Lazy Loading in unseren importierten Komponenten implementieren. Sehen wir uns nun an, wie wir es in unseren Routen implementieren, während wir mit dem React-Router routen.

So implementieren Sie Lazy Loading mit React Router

Lazy Routing ist eigentlich eine bewährte Methode für Routen mit vielen Inhalten und kann die Ladezeit Ihrer Anwendung verlangsamen. Das Implementieren von Lazy Loading für React-Routen ist fast identisch mit dem, was wir zuvor beim Lazy Loading von dynamisch importierten Komponenten getan haben.

Lazy Loading React-Routen beziehen sich auf das dynamische Importieren einer Komponente nur dann, wenn sie benötigt wird. Angenommen, wir haben zwei Routen in unserer Anwendung und zwei Komponenten, die diese Routen darstellen. Wenn wir das erwähnte Routing wie folgt implementieren, wird jede Komponente nur geladen, wenn wir zur entsprechenden Route navigieren:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Zusammenfassung

In diesem Leitfaden haben wir gelernt, was Lazy Loading und Code Splitting sind, wie man sie implementiert und dass der beste Ort, um Lazy Loading zu implementieren, Routen sind. Dadurch wird vermieden, dass die gesamte Seite auf einmal gerendert wird, was bei Seiten mit großen Inhaltsmengen zu einer langsameren Ladezeit führen kann.