Wie optimiere ich React-Anwendungen mit Lazy Loading?

Für Ihre Komponenten, Bilder und was nicht

Lazy Loading ist eine alte Technik zur Optimierung von Webanwendungen sowie von mobilen Apps. Die Sache ist ziemlich einfach - rendern Sie keine Dinge, wenn sie in diesem Moment nicht angezeigt oder benötigt werden. Wenn wir beispielsweise eine Liste der anzuzeigenden Beiträge haben, sollten wir zunächst nur das rendern, was sich im Ansichtsfenster befindet. Das bedeutet, dass der Rest der Elemente später bei Bedarf gerendert wird (wenn sie sich im Ansichtsfenster befinden oder sich im Ansichtsfenster befinden).

Warum faul laden?

In den meisten Fällen sehen unsere Benutzer zumindest am Anfang nicht die gesamte Webseite. Unabhängig davon, wie die Benutzeroberfläche unserer Anwendung strukturiert wurde, gibt es bestimmte Komponenten, die der Benutzer möglicherweise zunächst oder nie benötigt!

In diesen Fällen beeinträchtigt das Rendern dieser Komponenten nicht nur die Leistung unserer Anwendung, sondern verschwendet auch viele Ressourcen (insbesondere wenn sie Bilder oder ähnliche datenhungrige Inhalte enthalten).

Das Laden oder Rendern dieser Komponenten bei Bedarf scheint daher eine effizientere Entscheidung zu sein. Dies kann die Leistung der Anwendung verbessern und gleichzeitig viele Ressourcen sparen.

Wie?

Wir werden eine Beispielanwendung erstellen, in der wir das verzögerte Laden anwenden können. Zuerst müssen wir unsere React-Anwendung create-react-appmit den folgenden Befehlen initialisieren :

create-react-app lazydemocd lazydemonpm run start

Das Initialisieren und Öffnen unserer Reaktionsanwendung im Browserport kann einige Minuten dauern 3000.

Wenn Sie nicht create-react-appauf Ihrem PC installiert haben , können Sie mit dem folgenden Befehl installieren:npm install -g create-react-app

Jetzt erstellen wir eine Liste mit zufälligen Beiträgen. Lassen Sie uns also zuerst einige Dummy-Daten abrufen. Erstellen Sie eine Datei mit dem Namen data.jsim srcOrdner unseres Projekts. Ich habe gerade die jsonAntwort von diesem JSONPlatzhalterendpunkt //jsonplaceholder.typicode.com/posts kopiert. Sie können auch Ihre eigenen Dummy-Daten erstellen. Das folgende Format sollte für dieses Tutorial ausreichen:

Ersetzen wir den App.jsInhalt der Datei durch den folgenden Code:

Hier machen wir einfach eine Liste postsmit ihren titleund body. Und mit einigen einfachen CSSÄnderungen erhalten wir die Ansicht auf der rechten Seite. Hier wird die vollständige Liste sofort gerendert. Wenn wir zunächst nicht alles rendern möchten, sollten wir uns bewerben lazy loading. Lassen Sie es uns in unserem Projekt installieren:

Quelle: Twobin / React-Lazyload

npm install —-save react-lazyload

Jetzt aktualisieren wir die App.jsDatei durch Importieren und Anwenden lazyload.

Die Verwendung react-lazyloadist ziemlich einfach. Wickeln Sie die Komponente einfach mit t ein, um Laden anzuzeigen ... bis die Komponente geladen wurde. Wir können auch eff e Höhe et des LazyLoad Komponente. Weitere Details finden Sie in der Dokumentation: //github.com/twobin/react-lazyload#heightLazyLoad>. Here we are using a placeholder component> thaset thectiveand offs

Jetzt werden zunächst nicht alle Beiträge gerendert. Abhängig vom Ansichtsfenster werden zunächst nur wenige gerendert. Da die Inhalte bisher jedoch in Textform vorliegen, kann der Effekt nur realisiert werden, wenn wir die DOMs überprüfen und sehen, wie sie sich ändern, wenn sie von loadingnach wechseln loaded.

Um unser verzögertes Laden effektiver zu gestalten, fügen wir Bilder in Beiträge ein. Wir werden Lorem Picsum für unsere Fotos verwenden. Unsere aktualisierte PostKomponente sollte wie folgt aussehen:

Lorem Picsum URL-Format

//picsum.photos/id/[image_id‹/[width‹/[height]

Wie ich bereits sagte, sind Bilder datenhungrige Komponenten einer Webseite, und hier laden wir Bilder für jeden Beitrag. Obwohl die gesamte Komponente verzögert geladen wird und das Bild auch mit der Komponente geladen wird, wird das Bild etwas spät und nicht so reibungslos geladen. So können wir mit LazyLoad für einzelne Bilder eine bessere Erfahrung beim Laden von Bildern für unsere Benutzer erzielen.

Die Technik besteht darin, ein Bild mit sehr geringer Qualität als Platzhalter zu laden und dann das Originalbild zu laden. Das Finale App.jswürde also so aussehen -

Jetzt können wir anhand scrollder Liste inspect element opensehen, wie sich diese Komponenten ändern, wenn sie sich dem Ansichtsfenster nähern. Anschließend werden sie gerendert und der Platzhalter durch den tatsächlichen Inhalt ersetzt.

Und wir sind fertig, denn jetzt arbeitet unser LazyLoad mit all seiner Anmut. Das war ziemlich einfach !!!

Das Bild LazyLoad hier ist nicht der beste Anwendungsfall, da es bereits von der Komponente LazyLoad verarbeitet wird. Die Technik kann jedoch in anderen Anwendungsfällen sehr nützlich sein, in denen viele Bilder angezeigt werden müssen. Versuchen Sie, die LazyLoad on Post-Komponente zu deaktivieren, aber behalten Sie das Bild LazyLoad bei. Sie können dessen Auswirkungen sehen.

Github: //github.com/nowshad-sust/lazydemo

React LazyLoad: Twobin / React-Lazyload