Nicht verwendeten Code entfernen

Mit npm ist das Hinzufügen von Code zu Ihrem Projekt ein Kinderspiel. Aber nutzen Sie wirklich all diese zusätzlichen Bytes?

Houssein Djirdeh

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

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 durch größere Bandbreitenkonflikte verursacht werden, die durch zu viele Assets verursacht werden. Der LCP kann auch betroffen sein, wenn große JavaScript-Assets, die das Markup ausschließlich für den Client rendern, Verweise auf LCP-Kandidaten enthalten, indem das Laden dieser Ressourcen verzögert wird.

Andere Messwerte wie First Input Delay (FID) und Interaction to Next Paint (INP) können ebenfalls von nicht verwendetem Code betroffen sein, da selbst nicht verwendetes JavaScript heruntergeladen, geparst, kompiliert und dann ausgeführt werden muss. Nicht verwendeter Code kann zu unnötigen Verzögerungen bei der Ladezeit von Ressourcen, der Arbeitsspeichernutzung und der Hauptthread-Aktivität führen, was zu einer schlechten Reaktionszeit der Seite führt.

In diesem Leitfaden erfahren Sie, wie Sie die Codebasis Ihres Projekts analysieren und nicht verwendeten Code aus den JavaScript-Assets entfernen, die Sie in der Produktion an Ihre Nutzer senden.

Paket analysieren

Mit den Entwicklertools lässt sich die Größe aller Netzwerkanfragen ganz einfach ermitteln:

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 erfahren Sie auch, wie viel CSS- und JS-Code in Ihrer Anwendung nicht verwendet wird.

Wenn Sie eine vollständige Lighthouse-Konfiguration über die Node-CLI angeben, lässt sich mithilfe einer Prüfung des Typs „Nicht verwendetes JavaScript“ auch nachvollziehen, wie viel nicht verwendeter Code mit Ihrer Anwendung gesendet wird.

Wenn Sie webpack als Bundler verwenden, können Sie mit Webpack Bundle Analyzer untersuchen, 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.

Mit dieser Visualisierung können Sie prüfen, welche Teile Ihres Bundles größer als andere sind, und sich eine bessere Vorstellung von allen Bibliotheken verschaffen, die Sie importieren. So können Sie leichter 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';

Es ist wichtig zu betonen, dass dieser Prozess für größere Anwendungen erheblich komplexer ist.

Treten Sie bei dem mysteriös wirkenden Paket, von dem Sie sicher sind, dass es nirgendwo verwendet wird, einen Schritt zurück und prüfen Sie, welche Ihrer Abhängigkeiten auf oberster Ebene es verwenden. Versuchen Sie, nur die Komponenten zu importieren, die Sie tatsächlich benötigen. Wenn Sie keine Bibliothek verwenden, entfernen Sie sie. Wenn die Bibliothek für den anfänglichen Seitenaufbau nicht erforderlich ist, empfiehlt es sich möglicherweise, Lazy Loading zu verwenden.

Falls Sie Webpack verwenden, sollten Sie sich die Liste der Plug-ins ansehen, die nicht verwendeten Code automatisch aus gängigen Bibliotheken entfernen.

Unnötige Bibliotheken entfernen

Nicht alle Bibliotheken lassen sich einfach in einzelne Teile zerlegen und selektiv importieren. Überlegen Sie in diesen Fällen, ob die Bibliothek vollständig entfernt werden könnte. Die Entwicklung einer benutzerdefinierten Lösung oder die Nutzung einer einfacheren Alternative sollte immer Optionen in Betracht ziehen. Es ist jedoch wichtig, die für einen dieser Bemühungen erforderliche Komplexität und den erforderlichen Aufwand abzuwägen, bevor eine Bibliothek vollständig aus einer Anwendung entfernt wird.