Node_modules mit Yarn Plug'n'Play loswerden

Reduzieren Sie Ihre Installationszeit um bis zu 70%. Frag mich wie! ?

Jeder, der mich kennt, kann bestätigen, dass ich ein langjähriger Liebhaber von JavaScript und seinem gesamten Ökosystem bin . Als Front-End-Ingenieur sind Node-basierte Paketmanager seit 2013 ein wichtiger Bestandteil meines Toolset.

Zuerst habe ich Bower verwendet, das sich hauptsächlich auf die Front-End-Welt konzentrierte. Dann, im Jahr 2015, wurde mir leider (ok, nicht wirklich ) klar, dass Bower im Sterben lag und NPM, der Standard-Paketmanager für Node, auch der Weg für das Front-End war. Anfangs war es seltsam für mich, NPM für andere Zwecke als für Knotenmodule zu verwenden, aber ich habe mich an die Idee gewöhnt und bin nahtlos migriert.

Nur ein Jahr später gab uns Facebook schließlich Yarn, eine moderne und blitzschnelle Alternative zu NPM. Ich habe es auf den ersten Blick geliebt! Aber einige Dinge waren immer noch problematisch ...

Vererbte Probleme in Garn

Neben der Geschwindigkeit brachte Yarn im Vergleich zur damaligen NPM-Version eine Reihe von Vorteilen mit sich, z. B. Sperrdateien, Offline-Modus, Ausfallsicherheit des Netzwerks, Prüfsummen und andere. Trotzdem hat Yarn einige bekannte Probleme von NPM ausgeliehen:

node_modules hier, dort, überall

Für jedes Projekt auf Ihrem Computer, das NPM oder Garn verwendet, wird ein node_modulesOrdner erstellt. Es spielt keine Rolle, ob 10 Projekte genau dieselbe Version eines bestimmten Moduls verwenden, es wird immer wieder in jeden node_modulesOrdner dieser Projekte kopiert .

Das Generieren eines neuen Ordners node_modules dauert sehr lange

Selbst wenn Yarn in Bezug auf die Installationsgeschwindigkeit einen großen Sprung nach vorne machte, wurde es durch die Einschränkungen von node_modules eingeschränkt. Das Erstellen des Ordners node_modules dauert bis zu 70% der für die Ausführung erforderlichen Zeit yarn install(mit einem warmen Cache). Es ist eine große Menge an Dateien, die bei jeder Installation erstellt werden müssen. Also, beschuldigen Sie nicht Garn.

Abhängigkeiten wurden nicht zu package.json hinzugefügt

Hier ist ein Szenario für Sie: Ihre App funktioniert perfekt in der Entwicklung, stürzt jedoch in der Produktion ab. Nach stundenlangen Nachforschungen stellen Sie schließlich fest, dass Sie vergessen haben, eine Abhängigkeit zu Ihrer hinzuzufügen package.json. Ja, das kann passieren.

Langsame Modulauflösung zur Laufzeit

Die Startzeit Ihrer App wird stark von der Art und Weise beeinflusst, wie Node Abhängigkeiten auflöst. Es verschwendet Zeit, das Dateisystem abzufragen, um herauszufinden, woher eine bestimmte Abhängigkeit aufgelöst wird.

Garn Plug'n'Play zur Rettung!

Alle oben genannten Probleme wurden vom Yarn-Team mit der Veröffentlichung der Plug'n'Play-Funktion im vergangenen September behoben.

Wenn Sie PnP aktivieren, anstatt alle benötigten Dateien aus dem Cache in den node_modulesOrdner zu kopieren , gehen Sie wie folgt vor:

  1. Es wird eine einzelne Datei mit statischen Auflösungstabellen erstellt. Diese Tabellen enthalten eine Reihe wichtiger Informationen, z. B.: Pakete, die im Abhängigkeitsbaum verfügbar sind, wie sie sich untereinander und an ihrem Speicherort auf der Festplatte verhalten.
  2. Ein spezieller Resolver wird verwendet, um Node dabei zu helfen, herauszufinden, wo jede Abhängigkeit installiert wurde (unter dem Garn-Cache-Ordner). Es stützt sich ausschließlich auf die zuvor erstellten Auflösungstabellen. Da diese Tabellen Informationen über den gesamten Abhängigkeitsbaum enthalten, muss der Auflösungsprozess für node_modules nicht mehr viel ausführen statund readdirzur Laufzeit aufrufen, was die Startzeit Ihrer App erheblich verkürzt . Und da Yarn alle Ihre Abhängigkeiten kennt, wird es sich beschweren, wenn Sie versuchen, ein Modul zu importieren, das in Ihrem nicht vorhanden ist package.json:

Verwenden von Yarn Plug'n'Play

Das Konvertieren eines Projekts zur Verwendung von PnP ist mit 1–2–3 einfach. Sie müssen nur einen installConfigAbschnitt zu Ihrem hinzufügen package.json, mit einem pnpSchlüssel truewie diesem:

{ "installConfig": { "pnp": true }}
Hinweis: Sie benötigen Yarn v1.12 +, um Plug'n'Play verwenden zu können.

Danach einfach ausführen yarn installund alles in Ihrem node_modulesOrdner wird gelöscht. Von nun an wird jede Abhängigkeit direkt aus dem Hot-Cache von Yarn aufgelöst.

Verwenden von PnP in einem neuen React-Projekt mit der Create-React-App

Wenn Sie die Create-React-App 2+ verwenden, ist die gute Nachricht, dass sie mit Yarn Plug'n'Play hervorragend funktioniert! Fügen Sie einfach die --use-pnpOption an den create-react-appBefehl an und los geht's:

npx create-react-app your-app-name --use-pnp

Mögliche Probleme

Da nichts auf der Welt perfekt ist, kann es bei PnP zu neuen Problemen kommen, wenn es in Projekten verwendet wird, die auf einer benutzerdefinierten Installationslogik basieren. Wenn Sie weitere Informationen zu diesen potenziellen neuen Problemen benötigen, finden Sie in diesem Dokument eine ausführliche Erklärung.

Fazit

Plug'n'Play löst einige wirklich nervige Probleme in Yarn. Außerdem verbessert es das Abhängigkeits-Caching von CIs erheblich, spart Installationszeit und ermöglicht unseren Builds, auf den Punkt zu kommen: Ausführen der Tests!

Und das ist es! Viel Spaß mit Yarn PnP.