Fast 60% der Website-Besucher verlassen es, wenn das Laden länger als 3 Sekunden dauert. 80% dieser Besucher kehren nicht mehr auf die Website zurück. Dies legt nahe, dass der Erfolg eines Webprojekts nicht zuletzt von seiner Geschwindigkeit abhängt. Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, möchte über Techniken zur Verbesserung der Leistung von React-Anwendungen sprechen.
Ergebnisse der AnwendungsoptimierungBenchmarks
Bevor ich Ihnen erzähle, wie ich die Anwendung beschleunigt habe, möchte ich einige Zahlen anzeigen. Hier wurden die Messungen in der Erwartung durchgeführt, dass sie mit der Anwendung über eine für moderne Standards eher langsame Verbindung funktionieren. Es sollte jedoch beachtet werden, dass in Wirklichkeit die meisten Benutzer schnellere Verbindungen haben werden.
- Während der Messungen auf der Registerkarte "Netzwerk" der Chrome-Entwicklertools wurde die Datenübertragungsrate zwangsweise auf das Niveau einer schnellen 3G-Verbindung beschränkt.
- First Load-Metrik bei deaktiviertem Cache.
- Die 2. Ladeanzeige zeigt den Zeitpunkt des erneuten Ladens der Anwendung an, wenn der Cache aktiviert ist.
Wie Sie sehen, ist der Unterschied zwischen einer optimierten und einer nicht optimierten Anwendung ziemlich groß. Dies macht sich insbesondere in langsamen Netzwerken bemerkbar.
Die Größe des Anwendungspakets wurde mit dem Source-Map-Explorer untersucht. Mit diesem Tool können Sie auch feststellen, wie viel Speicherplatz verschiedene Bibliotheken belegen. Die oben in der Abbildung angezeigten Indikatoren werden mit Google Lighthouse gemessen.
Jetzt werde ich darüber sprechen, wie ich die Anwendung optimiert habe.
1. Verwenden von CSS anstelle von CSS-in-JS
In der alten Version der Anwendung habe ich die Bibliothek mit den gestalteten Komponenten verwendet. Warum ist das so schlimm? Die Sache ist, einfaches CSS ist schneller und nimmt weniger Platz ein. Moderne Browser können CSS-Code parallel zum JavaScript-Bundle laden. Darüber hinaus benötigen Sie keine zusätzliche Bibliothek, um reguläres CSS zu verwenden. Die minimierte Version von gestylten Komponenten benötigt ungefähr 54 KB. Die Verwendung von normalem CSS anstelle von gestalteten Komponenten führte dazu, dass der Anwendungscode schneller geladen wird und dass das System beim Ändern von Stilen weniger Berechnungen durchführen muss.
Durch einfaches Verlassen der Bibliothek mit gestalteten Komponenten und Umschalten auf reguläres CSS kann die Ladezeit der Site um etwa 0,3 Sekunden reduziert werdenWenn CSS eine bessere Leistung ermöglicht als Technologien, die CSS-in-JS implementieren, fragen Sie sich möglicherweise, warum Entwickler diese Komponenten-Styling-Technologie verwenden. Einer der Gründe für die Wahl von CSS-in-JS ist die Tatsache, dass Sie mit dieser Technologie den Umfang der Stile einschränken und das globale Styling aufgeben können. Es ist praktisch für die Arbeit mit Anwendungsthemen. Und vielleicht mag es jemand, React-Anwendungen so zu gestalten.
▍ Stile mit begrenztem Umfang
Die Create-React-App unterstützt jetzt offiziell
CSS-Module mit einem begrenzten Umfang. Dies bedeutet, dass Sie den Umfang der Stile einschränken können, ohne zusätzliche Bibliotheken zu verwenden.
▍ Themen
Wenn Sie mit der Styled-Components-Bibliothek arbeiten, müssen Sie diese Variablen in
ThemeProvider , um die Variablen zu verwenden, die die Themen definieren. All dies ist gut, aber seit Mai 2019 unterstützen 91% der Browser eine ähnliche Standard-CSS-Funktion.
Wenn Sie der Meinung sind, dass 91% nicht gut genug sind, denken Sie daran, dass es möglicherweise nicht so klein ist.
Unterstützung von CSS-VariablenWenn Sie nicht an IE-Unterstützung interessiert sind, können Sie
CSS-Variablen sicher in Ihren Projekten verwenden. Wenn Sie sich für dieses Thema interessieren, empfehle ich Ihnen, sich
dieses Material anzusehen.
2. Vermeiden großer CSS-Bibliotheken
Paketanalysematerial-uiIch bin ein großer Fan von Material Design. Für React wurde eine großartige Materialbibliothek namens material-ui geschrieben. Diese Bibliothek hat nur ein Problem. Das ist ihre Größe. Sie ist sehr großartig. Selbst wenn Sie nur die einzelnen Komponenten verwenden, fällt die Implementierung des CSS-in-JS-Mechanismus in das Bundle, und dies sind ungefähr 30 KB minimierter Code.
Was sind die Alternativen? Ich habe beschlossen, meine eigenen Komponenten zu erstellen und sie beim Erstellen der Anwendung zu gestalten. Einer der Gründe für diese Wahl war, dass ich mein CSS-Wissen auffrischen wollte. Und ich habe schon lange keinen CSS-Code mehr geschrieben. Es gibt jedoch andere Möglichkeiten. Insbesondere handelt es sich um CSS-Frameworks, deren Größe viel kleiner ist als die Größe der Material-Benutzeroberfläche. Dies sind beispielsweise Spectre und Bulma, deren Code nach der GZIP-Komprimierung 9 bzw. 40 KB benötigt.
Spectre - 9 Kb nach GZIP-KomprimierungBulma - 40 Kb nach GZIP-Komprimierung3. Lazy Laden von Seiten
Sie haben also einen Router mit vielen importierten Seiten. Wenn wir über ein paar Seiten sprechen, gibt es hier keine Probleme. Mit zunehmender Anzahl der Seiten steigt jedoch auch die Zeit, zu der die Site zum ersten Mal angezeigt wird. So könnten die Importbefehle aussehen:
import NotFound from "pages/NotFound"; import Projects from "pages/Projects"; import Project from "pages/Project";
Wie kann man es verbessern? Zum Glück kann React das verzögerte Laden von Seiten organisieren. Gleiches gilt für den Komponentencode, der bei Bedarf in kleine Fragmente zerlegt werden kann. So sieht es aus:
import React, { lazy, Suspense } from "react"; const load = (Component: any) => (props: any) => ( <Suspense fallback={<Loader />}> <Component {...props} /> </Suspense> ); const NotFound = load(lazy(() => import("pages/NotFound"))); const Projects = load(lazy(() => import("pages/Projects"))); const Project = load(lazy(() => import("pages/Project")));
4. Progressive Webanwendungstechnologien
Progressive Webanwendungen verwenden Servicemitarbeiter. Sie ermöglichen Benutzern das Hinzufügen von Anwendungen zu den Startbildschirmen ihrer Geräte. Dies ist jedoch nicht auf Service-Worker-Optionen beschränkt. Insbesondere können sie das Caching deutlich verbessern. Dies führt dazu, dass die Anwendung nach dem ersten Download viel schneller geladen wird.
5. Pakete loswerden, die interessant erscheinen, aber nicht viel Nutzen bringen
In meinem ursprünglichen Projekt habe ich beim Mounten der Komponenten viele Animationen verwendet, die das Laden der Seite animierten. All dies verlangsamte nicht nur die Seite. Dies machte sie viel langsamer als sie sein konnte. Ich schaute auf die Seite und freute mich darüber, wie süß sie aussieht, bis ein bestimmter Punkt nicht mehr an Leistung dachte. Die Seite wurde aber nicht nur animiert. Es gab andere ähnliche Dekorationen. Zum Beispiel eine Schaltfläche, mit der Sie zum Anfang der Seite gelangen können. Zum Beispiel - animiertes Laden einiger Elemente. Ich mochte das alles, aber bei näherer Betrachtung stellte sich heraus, dass zum Beispiel die Site auf nicht den schnellsten Geräten wirklich langsamer wird. Außerdem habe ich die Seite zunächst ausschließlich auf einem Laptop getestet, sodass ich nicht sofort davon erfahren habe.
Ich hatte auch eine Slider-Komponente, die ich der Seite hinzufügte, ohne viel über das „Gewicht“ nachzudenken. Ich habe es für eine Diashow verwendet. Wie sich später herausstellte, belegte nur der Code dieses Schiebereglers in minimierter Form 30 KB. Dann habe ich beschlossen, selbst eine Komponente für eine Diashow zu erstellen. Der minimierte Code benötigte am Ende 25 KB. Dieser Band enthielt eine gute Animationsbibliothek und ein System zum Arbeiten mit Gesten, das nicht nur für Diashows, sondern auch in anderen Teilen der Anwendung verwendet werden kann. Und es sieht so aus, als wäre das, was ich getan habe, viel besser als eine Lösung von Drittanbietern.
Hier ist ein Schieberegler von NPM.
NPM-SchiebereglerHier ist mein Schieberegler
Selbst entwickelter Schieberegler (im Leben funktioniert er viel flüssiger als bei diesem GIF-Bild mit niedriger Bildrate)Sehen Sie diesen Schieberegler hier in Aktion.
▍ Analyse der Bundle-Größe
Wenn Sie die App "create-react-app" verwenden, können Sie die Zusammensetzung des Bundles ganz einfach analysieren. Führen Sie dazu den
npm run build und anschließend den
npx source-map-explorer "build/static/js/*.js" . Danach wird eine Seite mit Informationen zur Zusammensetzung des Bundles geöffnet, die der unten gezeigten ähnelt.
Bundle-InformationenZusammenfassung
Wie Sie sehen können, ist es nicht so schwierig, React-Anwendungen zu beschleunigen. Es reicht aus, sorgfältig zu überwachen, woraus sie bestehen, sie zu testen und entsprechende Änderungen daran vorzunehmen.
Hier ist das Projekt, das hier vor und nach der Verbesserung besprochen wurde.
Wenn Sie an der Optimierung von React-Anwendungen interessiert sind, finden Sie hier einige unserer Veröffentlichungen zu diesem Thema:
Liebe Leser! Haben Sie Beispiele für eine erfolgreiche (oder erfolglose) Optimierung von React-Anwendungen?
