Nicht verwendeten Code entfernen

Houssein Djirdeh

Registries wie npm haben die JavaScript-Welt revolutioniert, da jeder über eine halbe Million öffentlicher Pakete herunterladen und verwenden kann. 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. Der LCP kann auch betroffen sein, wenn große JavaScript-Assets, die das Markup nur auf dem Client rendern, Verweise auf LCP-Kandidaten enthalten, da sich das Laden dieser Ressourcen verzögert.

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 Haupt-Threads führen, was zu einer schlechten Reaktionsfähigkeit der Seite beiträgt.

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

In den DevTools können Sie die Größe aller Netzwerkanfragen sehen:

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem 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 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 dem Webpack Bundle Analyzer herausfinden, aus welchen Elementen 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, 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. So können Sie die Anzahl und Größe der Bibliotheken besser nachvollziehen, die Ihre Anwendung importiert. 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, von welchen Abhängigkeiten der obersten Ebene es verwendet wird. 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.