Nicht verwendeten Code entfernen

Houssein Djirdeh

Registries wie npm haben die JavaScript-Welt zum Besseren transformiert, mehr als eine halbe Million öffentliche Pakete herunterladen und nutzen. Aber wir fügen oft Bibliotheken, die wir nicht vollständig nutzen. Analysieren Sie Ihr Set, um das Problem zu beheben. um nicht verwendeten Code zu erkennen, und entfernen Sie dann unused und unnötige Bibliotheken.

Auswirkungen auf Core Web Vitals

Wenn Sie nicht verwendeten Code entfernen, können Sie Core Web Vitals: Largest Contentful Paint Sie können beispielsweise durch nicht verwendetem Code beeinträchtigt werden, wenn unnötig große Assets mit anderen Ressourcen um Bandbreite konkurrieren. LCP kann auch betroffen sein, wenn JavaScript-Assets, die das Markup nur auf dem Client rendern Verweise auf LCP-Kandidaten enthalten durch Verzögern des Ladevorgangs dieser Ressourcen.

Nicht verwendeter Code kann sich auch auf Interaction to Next Paint (INP) auswirken. da selbst nicht verwendetes JavaScript heruntergeladen, geparst, kompiliert ausgeführt haben. Der ungenutzte Code kann unnötige Verzögerungen beim Laden von Ressourcen verursachen Zeit, Arbeitsspeichernutzung und Hauptthreadaktivität, die zu einer schlechten Seite führen, die Sensibilität.

In diesem Leitfaden wird erläutert, wie Sie die Codebasis Ihres Projekts auf nicht verwendeten Code analysieren. bietet Strategien zum Beschneiden nicht verwendetem Code aus den JavaScript-Assets, an die Sie liefern in der Produktion verwenden.

Set analysieren

Mit den Entwicklertools können Sie die Größe aller Netzwerkanfragen anzeigen:

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + 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.

<ph type="x-smartling-placeholder">

</ph>

Entwicklertools mit der Größe einer JavaScript-Datei

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

<ph type="x-smartling-placeholder">

</ph>

Tab „Abdeckung“

Durch Angabe einer vollständigen Lighthouse-Konfiguration über die Node-CLI können Sie Folgendes ausführen: Die Prüfung „Nicht verwendetes JavaScript reduzieren“, um nachzuvollziehen, wie viel nicht verwendeter Code versendet wird mit Ihrer Anwendung/

<ph type="x-smartling-placeholder">

</ph>

Reduziere den Bericht zu ungenutztem JavaScript.

Wenn Sie webpack als Bundler verwenden, Webpack Bundle Analyzer können Sie herausfinden, woraus sich das Set zusammensetzt. Fügen Sie das Plug-in in die Webpack-Konfigurationsdatei wie jedes andere Plug-in verwenden:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

Webpack wird zwar häufig zum Erstellen von Single-Page-Anwendungen verwendet, Bundler wie Parcel und Rollup haben auch Visualisierungstools, Ihr Set analysieren können.

Beim Aktualisieren der Anwendung mit diesem Plug-in wird eine zoombare Strukturkarte mit für Ihr gesamtes Paket.

<ph type="x-smartling-placeholder">

</ph>

Strukturkartenansicht von Webpack Bundle Analyzer.

Diese Visualisierung zeigt, welche Teile Ihres Sets größer sind als damit Sie die Anzahl und Größe der Bibliotheken die von Ihrer Anwendung importiert werden. So können Sie feststellen, ob Sie nicht verwendete oder unnötige Bibliotheken.

Nicht verwendete Bibliotheken entfernen

In der vorherigen Strukturkarte sind einige Pakete in einem @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';

Hinweis :Dieser Vorgang ist bei größeren Apps deutlich komplexer.

Für das rätselhaft aussehende Paket, von dem du dir ziemlich sicher bist, dass es nicht verwendet wird gehen Sie einen Schritt zurück und sehen Sie sich an, welche Ihrer übergeordneten Abhängigkeiten verwenden. Versuchen Sie eine Möglichkeit zu finden, nur die Komponenten zu importieren, die Sie benötigen. Wenn Sie eine Bibliothek nicht verwenden, entfernen Sie sie. Wenn die Bibliothek für den beim ersten Seitenaufbau: Lazy Loading .

Wenn Sie Webpack verwenden, sehen Sie sich diese Liste der Plug-ins an, die automatisch Entfernen Sie nicht verwendeten Code aus gängigen Bibliotheken.

Ausprobieren : Nicht verwendeten Code entfernen

Unnötige Bibliotheken entfernen

Nicht alle Bibliotheken können in einzelne Teile aufgeteilt und selektiv importiert werden. Überlegen Sie in diesen 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 Optionen, die eine Überlegung wert sind. Es ist jedoch wichtig, die Komplexität und für eine dieser Strategien ist, bevor eine Bibliothek entfernt wird. vollständig über Ihre App.