Registries wie npm haben die JavaScript-Welt zum Besseren verändert: Jeder kann mehr als eine halbe Million öffentliche Pakete herunterladen und verwenden. Häufig werden aber Bibliotheken eingebunden, die nicht vollständig genutzt werden. Um dieses Problem zu beheben, analysieren Sie Ihr Bundle, um nicht verwendeten Code zu erkennen, und entfernen Sie dann ungenutzte und unnötige Bibliotheken.
Auswirkungen auf die Core Web Vitals
Wenn Sie nicht verwendeten Code entfernen, können Sie die Core Web Vitals Ihrer Website verbessern. Largest Contentful Paint kann beispielsweise von nicht verwendetem Code betroffen sein, wenn unnötig große Assets mit anderen Ressourcen um die Bandbreite konkurrieren. LCP kann auch betroffen sein, wenn große JavaScript-Assets, die das Markup nur auf dem Client rendern, Verweise auf LCP-Kandidaten enthalten, indem sie das Laden dieser Ressourcen verzögern.
Ungenutzter Code kann sich auch auf den Wert „Interaction to Next Paint“ (INP) auswirken, da auch nicht verwendetes JavaScript heruntergeladen, geparst, kompiliert und dann ausgeführt werden muss. Der nicht verwendete Code kann zu unnötigen Verzögerungen bei der Ressourcenladezeit, der Arbeitsspeichernutzung und der Aktivität des Hauptthreads führen, was zu einer schlechten Reaktionszeit der Seite führt.
In diesem Leitfaden wird erläutert, wie Sie die Codebasis Ihres Projekts auf ungenutzten Code analysieren. Außerdem werden Strategien zur Bereinigung von ungenutztem Code aus den JavaScript-Assets vorgestellt, die Sie Ihren Nutzern in der Produktion zur Verfügung stellen.
Paket analysieren
Mit den Entwicklertools können Sie die Größe aller Netzwerkanfragen anzeigen:
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Klicken Sie das Kästchen Cache deaktivieren an.
- Lade die Seite neu.
Auf dem Tab Abdeckung in den DevTools sehen Sie auch, wie viel CSS- und JS-Code in Ihrer Anwendung nicht verwendet wird.
Wenn Sie eine vollständige Lighthouse-Konfiguration über die Node-Befehlszeile angeben, können Sie die Prüfung „Nicht verwendetes JavaScript reduzieren“ ausführen, um zu sehen, wie viel nicht verwendeter Code mit Ihrer Anwendung ausgeliefert wird.
Wenn Sie webpack als Bundler verwenden, können Sie mit Webpack Bundle Analyzer die Bestandteile des Bundles untersuchen. Fügen Sie das Plug-in wie jedes andere Plug-in in die webpack-Konfigurationsdatei ein:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Obwohl webpack häufig zum Erstellen von Single-Page-Anwendungen verwendet wird, bieten auch andere Bundler wie Parcel und Rollup Visualisierungstools, mit denen Sie Ihr Bundle analysieren können.
Wenn Sie die Anwendung mit diesem Plug-in neu laden, wird eine zoombare Strukturkarte Ihres gesamten Bundles angezeigt.
Diese Visualisierung zeigt, welche Teile Ihres Bundles größer als andere sind, sodass Sie die Anzahl und Größe der von Ihrer Anwendung importierten Bibliotheken besser nachvollziehen können. So können Sie feststellen, ob Sie nicht verwendete oder nicht benötigte Bibliotheken verwenden.
Nicht verwendete Bibliotheken entfernen
Auf dem vorherigen Treemap-Bild sind ziemlich viele Pakete in einer einzelnen @firebase-Domain zu sehen. Wenn für Ihre Website nur die Firebase-Datenbankkomponente benötigt wird, aktualisieren Sie die Importe, um diese Bibliothek abzurufen:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Wenn Sie ein mysteriös aussehendes Paket finden, von dem Sie ziemlich sicher sind, dass es nirgendwo verwendet wird, gehen Sie einen Schritt zurück und sehen Sie nach, welche Ihrer Abhängigkeiten der obersten Ebene es verwenden. Versuchen Sie, nur die Komponenten daraus zu importieren, die Sie benötigen. Wenn Sie eine Bibliothek nicht verwenden, entfernen Sie sie. Wenn die Bibliothek nicht für das initiale Laden der Seite erforderlich ist, sollten Sie sie lazy laden.
Wenn Sie webpack verwenden, sehen Sie sich diese Liste der Plug-ins an, mit denen nicht verwendeter Code aus beliebten Bibliotheken automatisch entfernt wird.
Unnötige Bibliotheken entfernen
Nicht alle Bibliotheken können in Teile zerlegt und selektiv importiert werden. Überlegen Sie in diesen Fällen, ob Sie die Bibliothek vollständig entfernen können. Eine benutzerdefinierte Lösung zu erstellen oder eine leichtere Alternative zu nutzen, sollte immer eine Option sein, die Sie in Betracht ziehen sollten. Es ist jedoch wichtig, die Komplexität und den Aufwand für jede dieser Strategien abzuwägen, bevor Sie eine Bibliothek vollständig aus Ihrer App entfernen.