Nicht verwendeten Code entfernen

Houssein Djirdeh

Registries wie npm haben die JavaScript-Welt stark verändert, da jeder Nutzer mehr als eine halbe Million öffentliche Pakete herunterladen und verwenden kann. Oft schließen wir aber auch Bibliotheken ein, die wir nicht vollständig nutzen. Analysieren Sie Ihr Bundle, um nicht verwendeten Code zu erkennen, und entfernen Sie dann nicht verwendete und unnötige Bibliotheken, um dieses Problem zu beheben.

Auswirkungen auf Core Web Vitals

Wenn Sie nicht verwendeten Code entfernen, können Sie die Core Web Vitals Ihrer Website verbessern. Largest Contentful Paint kann beispielsweise durch nicht verwendeten Code beeinträchtigt werden, wenn unnötig große Assets Bandbreite mit anderen Ressourcen konkurrieren. Der LCP kann auch beeinträchtigt werden, wenn große JavaScript-Assets, die Markup nur auf dem Client rendern, Verweise auf LCP-Kandidaten enthalten, indem das Laden dieser Ressourcen verzögert wird.

Nicht verwendeter Code kann sich auch auf Interaction to Next Paint (INP) auswirken, da selbst nicht verwendetes JavaScript heruntergeladen, geparst, kompiliert und dann ausgeführt werden muss. Der nicht verwendete Code kann zu unnötigen Verzögerungen bei der Ladezeit von Ressourcen, der Arbeitsspeichernutzung und der Hauptthreadaktivität führen, was zu einer schlechten Reaktionszeit der Seite führt.

In diesem Leitfaden wird erläutert, wie Sie die Codebasis Ihres Projekts auf nicht verwendeten Code analysieren können. Außerdem finden Sie Strategien zum Entfernen von nicht verwendetem Code aus den JavaScript-Assets, die Sie in der Produktion an Ihre Nutzer senden.

Paket analysieren

Die Entwicklertools können die Größe aller Netzwerkanfragen anzeigen:

1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Netzwerk.
3. Klicken Sie das Kästchen Cache deaktivieren an.
4. Lade die Seite neu.

Auf dem Tab Abdeckung in den Entwicklertools sehen Sie auch, wie viel CSS- und JS-Code in Ihrer Anwendung nicht verwendet wird.

Wenn Sie über die Node-CLI eine vollständige Lighthouse-Konfiguration angeben, können Sie die Prüfung „Nicht verwendetes JavaScript reduzieren“ ausführen, um zu verfolgen, wie viel nicht verwendeter Code mit Ihrer Anwendung geliefert wird.

Wenn Sie Webpack als Bundler verwenden, können Sie mit Webpack Bundle Analyzer herausfinden, woraus das Bundle besteht. 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, haben auch andere Bundler wie Parcel und Rollup Visualisierungstools, mit denen Sie Ihr Bundle analysieren können.

Wenn Sie die Anwendung mit diesem Plug-in aktualisieren, wird eine zoombare Strukturkarte Ihres gesamten Bundles angezeigt.

Diese Visualisierung zeigt, welche Teile Ihres Bundles größer sind als andere, sodass Sie die Anzahl und Größe der Bibliotheken, die Ihre Anwendung importiert, besser nachvollziehen können. So können Sie feststellen, ob Sie nicht verwendete oder unnötige Bibliotheken verwenden.

Nicht verwendete Bibliotheken entfernen

In der vorherigen Strukturkarte gibt es mehrere Pakete innerhalb einer einzelnen @firebase-Domain. 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';

Bei einem mysteriös wirkenden Paket, von dem Sie sicher sind, dass es nirgendwo verwendet wird, sollten Sie einen Schritt zurücktreten und prüfen, welche Ihrer übergeordneten Abhängigkeiten es verwenden. Versuchen Sie, nur die Komponenten zu importieren, die Sie benötigen. Wenn Sie keine Bibliothek verwenden, entfernen Sie sie. Wenn die Bibliothek für den anfänglichen Seitenaufbau nicht erforderlich ist, bietet sich Lazy Loading an.

Wenn Sie Webpack verwenden, sollten Sie sich die Liste der Plug-ins ansehen, die nicht verwendeten Code automatisch aus beliebten Bibliotheken entfernen.

Unnötige Bibliotheken entfernen

Nicht alle Bibliotheken können in Teile unterteilt und selektiv importiert werden. Überlegen Sie in solchen Fällen, ob Sie die Bibliothek vollständig entfernen können. Die Entwicklung einer benutzerdefinierten Lösung oder die Nutzung einer einfacheren Alternative sollte immer in Betracht gezogen werden. Es ist jedoch wichtig, die Komplexität und den Aufwand für eine dieser Strategien abzuwägen, bevor Sie eine Bibliothek vollständig aus Ihrer App entfernen.