In diesem Codelab verbessern Sie die Leistung der folgenden Anwendung, indem Sie alle nicht verwendeten und nicht benötigten Abhängigkeiten entfernen.
Messen
Es empfiehlt sich immer, zuerst die Leistung einer Website zu messen, bevor Sie Optimierungen vornehmen.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild)
.
Klicken Sie auf Ihr Lieblingskätzchen. In dieser Anwendung wird die Realtime Database von Firebase verwendet. Deshalb wird die Punktzahl in Echtzeit aktualisiert und mit allen anderen Personen synchronisiert, die die Anwendung verwenden. 🐈
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Wahltaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Setzen Sie ein Häkchen bei Cache deaktivieren.
- Aktualisieren Sie die App.
Fast 1 MB JavaScript wird übertragen, um diese einfache Anwendung zu laden.
Sehen Sie sich die Projektwarnungen in den Entwicklertools an.
- Klicken Sie auf den Tab Console.
- Achten Sie darauf, dass
Warningsim Drop-down-Menü „Ebenen“ neben der EingabeFilteraktiviert ist.
- Sehen Sie sich die angezeigte Warnung an.
Firebase, eine der in dieser Anwendung verwendeten Bibliotheken, ist so freundlich, Entwickler darauf hinzuweisen, dass sie nicht das gesamte Paket, sondern nur die verwendeten Komponenten importieren sollten. Es gibt also ungenutzte Bibliotheken, die in dieser Anwendung entfernt werden können, damit sie schneller geladen wird.
Es gibt auch Fälle, in denen eine bestimmte Bibliothek verwendet wird, es aber eine einfachere Alternative gibt. Das Konzept des Entfernens nicht benötigter Bibliotheken wird später in dieser Anleitung erläutert.
Bundle wird analysiert
In der Anwendung gibt es zwei Hauptabhängigkeiten:
- Firebase: Eine Plattform, die eine Reihe nützlicher Dienste für iOS-, Android- oder Webanwendungen bietet. Hier wird die Realtime Database verwendet, um die Informationen für jedes Kätzchen in Echtzeit zu speichern und zu synchronisieren.
- Moment.js: Eine Dienstprogrammbibliothek, die die Verarbeitung von Datumsangaben in JavaScript vereinfacht. Das Geburtsdatum jedes Kätzchens wird in der Firebase-Datenbank gespeichert und
momentwird verwendet, um das Alter in Wochen zu berechnen.
Wie können nur zwei Abhängigkeiten zu einer Bundle-Größe von fast 1 MB beitragen? Einer der Gründe ist, dass jede Abhängigkeit wiederum eigene Abhängigkeiten haben kann. Es gibt also viel mehr als nur zwei, wenn jede Tiefe/jeder Zweig des Abhängigkeitsbaums berücksichtigt wird. Eine Anwendung kann relativ schnell groß werden, wenn viele Abhängigkeiten enthalten sind.
Analysieren Sie den Bundler, um sich ein besseres Bild davon zu machen, was passiert. Es gibt eine Reihe von verschiedenen von der Community entwickelten Tools, die dabei helfen können, z. B. webpack-bundle-analyzer.
Das Paket für dieses Tool ist bereits als devDependency in der App enthalten.
"devDependencies": {
//...
"webpack-bundle-analyzer": "^2.13.1"
},
Das bedeutet, dass es direkt in der webpack-Konfigurationsdatei verwendet werden kann.
Importieren Sie es ganz am Anfang von webpack.config.js:
const path = require("path");
//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
Fügen Sie es jetzt als Plug-in ganz am Ende der Datei im plugins-Array hinzu:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
};
Wenn die Anwendung neu geladen wird, sollten Sie eine Visualisierung des gesamten Bundles anstelle der Anwendung selbst sehen.
Nicht so süß wie Katzenbabys 🐱, aber trotzdem unglaublich hilfreich. Wenn Sie den Mauszeiger auf ein Paket bewegen, wird die Größe auf drei verschiedene Arten dargestellt:
| Statistikgröße | Größe vor der Reduzierung oder Komprimierung. |
|---|---|
| Geparte Größe | Größe des tatsächlichen Pakets im Bundle nach der Kompilierung. Version 4 von webpack (die in dieser Anwendung verwendet wird) minimiert die kompilierten Dateien automatisch. Deshalb ist diese Größe kleiner als die Statistikgröße. |
| GZIP-Größe | Größe des Pakets nach der Komprimierung mit gzip-Codierung. Dieses Thema wird in einem separaten Leitfaden behandelt. |
Mit dem Tool „webpack-bundle-analyzer“ lassen sich ungenutzte oder nicht benötigte Pakete, die einen großen Teil des Bundles ausmachen, leichter identifizieren.
Nicht verwendete Pakete entfernen
Die Visualisierung zeigt, dass das Paket firebase aus viel mehr als nur einer Datenbank besteht. Es enthält zusätzliche Pakete wie:
firestoreauthstoragemessagingfunctions
Dies sind alles hervorragende Dienste, die von Firebase bereitgestellt werden (weitere Informationen finden Sie in der Dokumentation). Keiner davon wird jedoch in der Anwendung verwendet, sodass es keinen Grund gibt, sie alle zu importieren.
Machen Sie die Änderungen in webpack.config.js rückgängig, um die Anwendung wieder zu sehen:
- Entfernen Sie
BundleAnalyzerPluginaus der Liste der Plug-ins:
plugins: [
//...
new BundleAnalyzerPlugin()
];
- Entfernen Sie jetzt den nicht verwendeten Import am Anfang der Datei:
const path = require("path");
//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
Die Anwendung sollte jetzt normal geladen werden. Ändern Sie src/index.js, um die Firebase-Importe zu aktualisieren.
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Wenn die App jetzt neu geladen wird, wird die Warnung in den Entwicklertools nicht angezeigt. Wenn Sie den Netzwerkbereich der Entwicklertools öffnen, sehen Sie auch eine deutliche Reduzierung der Bundle-Größe:
Mehr als die Hälfte der Bundle-Größe wurde entfernt. Firebase bietet viele verschiedene Dienste und Entwickler können nur die Dienste einbinden, die sie tatsächlich benötigen. In dieser Anwendung wurde nur firebase/database verwendet, um alle Daten zu speichern und zu synchronisieren. Der Import von firebase/app, mit dem die API-Oberfläche für die verschiedenen Dienste eingerichtet wird, ist immer erforderlich.
Viele andere beliebte Bibliotheken wie lodash ermöglichen es Entwicklern ebenfalls, verschiedene Teile ihrer Pakete selektiv zu importieren. Ohne viel Aufwand können Sie die Bibliotheksimporte in einer Anwendung so aktualisieren, dass nur die verwendeten Elemente enthalten sind. Dies kann zu erheblichen Leistungsverbesserungen führen.
Obwohl die Bundle-Größe bereits erheblich reduziert wurde, gibt es noch mehr zu tun. 😈
Nicht benötigte Pakete entfernen
Im Gegensatz zu Firebase ist das Importieren von Teilen der moment-Bibliothek nicht so einfach, aber vielleicht kann sie vollständig entfernt werden?
Der Geburtstag jedes süßen Kätzchens wird im Unix (Millisekunden) in der Firebase-Datenbank gespeichert.
Dies ist ein Zeitstempel eines bestimmten Datums und einer bestimmten Uhrzeit, dargestellt durch die Anzahl der Millisekunden, die seit dem 1. Januar 1970 um 00:00 Uhr UTC vergangen sind. Wenn das aktuelle Datum und die aktuelle Uhrzeit im selben Format berechnet werden können, lässt sich wahrscheinlich eine kleine Funktion erstellen, mit der das Alter jedes Kätzchens in Wochen ermittelt werden kann.
Wie immer sollten Sie versuchen, die Befehle nicht einfach zu kopieren und einzufügen, während Sie die Schritte hier nachvollziehen. Entfernen Sie zuerst moment aus den Importen in src/index.js.
import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';
Es gibt einen Firebase-Ereignis-Listener, der Wertänderungen in unserer Datenbank verarbeitet:
favoritesRef.on("value", (snapshot) => { ... })
Fügen Sie darüber eine kleine Funktion hinzu, um die Anzahl der Wochen ab einem bestimmten Datum zu berechnen:
const ageInWeeks = birthDate => {
const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
const diff = Math.abs((new Date).getTime() - birthDate);
return Math.floor(diff / WEEK_IN_MILLISECONDS);
}
In dieser Funktion wird die Differenz in Millisekunden zwischen dem aktuellen Datum und der aktuellen Uhrzeit (new Date).getTime() und dem Geburtsdatum (dem Argument birthDate, bereits in Millisekunden) berechnet und durch die Anzahl der Millisekunden in einer einzelnen Woche geteilt.
Schließlich können alle Instanzen von moment im Event-Listener entfernt werden, indem stattdessen diese Funktion verwendet wird:
favoritesRef.on("value", (snapshot) => {
const { kitties, favorites, names, birthDates } = snapshot.val();
favoritesScores = favorites;
kittiesList.innerHTML = kitties.map((kittiePic, index) => {
const birthday = moment(birthDates[index]);
return `
<li>
<img src=${kittiePic} onclick="favKittie(${index})">
<div class="extra">
<div class="details">
<p class="name">${names[index]}</p>
<p class="age">${moment().diff(birthday, 'weeks')} weeks old</p>
<p class="age">${ageInWeeks(birthDates[index])} weeks old</p>
</div>
<p class="score">${favorites[index]} ❤</p>
</div>
</li>
`})
});
Aktualisieren Sie die Anwendung und sehen Sie sich den Netzwerkbereich noch einmal an.
Die Größe unseres Bundles wurde noch einmal um mehr als die Hälfte reduziert.
Fazit
In diesem Codelab haben Sie gelernt, wie Sie ein bestimmtes Bundle analysieren und warum es so nützlich sein kann, nicht verwendete oder nicht benötigte Pakete zu entfernen. Bevor Sie mit der Optimierung einer Anwendung mit dieser Technik beginnen, sollten Sie wissen, dass dies bei größeren Anwendungen deutlich komplexer sein kann.
Wenn du nicht verwendete Bibliotheken entfernen möchtest, solltest du herausfinden, welche Teile eines Bundles verwendet werden und welche nicht. Wenn Sie ein mysteriöses Paket finden, das scheinbar nirgendwo verwendet wird, sollten Sie einen Schritt zurückgehen und prüfen, welche Abhängigkeiten auf oberster Ebene es möglicherweise benötigen. Versuchen Sie, eine Möglichkeit zu finden, sie voneinander zu entkoppeln.
Das Entfernen nicht benötigter Bibliotheken kann etwas komplizierter sein. Es ist wichtig, eng mit Ihrem Team zusammenzuarbeiten und zu prüfen, ob es Potenzial gibt, Teile der Codebasis zu vereinfachen. Das Entfernen von moment in dieser Anwendung mag auf den ersten Blick immer die richtige Entscheidung sein, aber was ist, wenn Zeitzonen und verschiedene Sprachen berücksichtigt werden müssen? Oder was wäre, wenn es kompliziertere Datumsmanipulationen gäbe? Das Bearbeiten und Parsen von Datums- und Uhrzeitangaben kann sehr kompliziert sein. Bibliotheken wie moment und date-fns vereinfachen dies erheblich.
Alles ist ein Kompromiss. Es ist wichtig, abzuwägen, ob es sich überhaupt lohnt, eine benutzerdefinierte Lösung einzuführen, anstatt sich auf eine Drittanbieterbibliothek zu verlassen.