Wie kann ich die Größe von npm-Paketen anzeigen?

Wenn ich auf NPM nach Paketen suche, möchte ich Paketgrößen (in KB oder MB usw.) sehen. NPM scheint diese Informationen nicht anzuzeigen.

Wie kann ich bestimmen, wie viel Aufblähung ein NPM-Paket meinem Projekt hinzufügt?

Was Sie wahrscheinlich messen möchten, ist die Auswirkung eines Pakets, wenn Sie es Ihrem App-Bundle hinzufügen. Die meisten anderen Antworten schätzen nur die Größe der Quelldateien, die aufgrund von Inline-Kommentaren, langen Variablennamen usw. möglicherweise ungenau sind.

Es gibt ein kleines Dienstprogramm, das ich erstellt habe und das Ihnen die min + gzipped Größe des Pakets anzeigt, nachdem es in Ihr Bundle gelangt ist -

https://bundlephobia.com

Schauen Sie sich dieses Modulkosten- Projekt an. Es ist ein npm-Paket, das die Größe eines Pakets und die Anzahl der Kinder auflistet.

Installation: npm install -g cost-of-modules

Verwendung: Führen Sie cost-of-modulesdas Verzeichnis aus, in dem Sie arbeiten.

Ich habe ein Tool namens npm download size erstellt , das die Tarballgröße für ein bestimmtes npm-Paket überprüft, einschließlich aller Tarballs im Abhängigkeitsbaum. Auf diese Weise erhalten Sie eine Vorstellung von den Kosten (Installationszeit, Speicherplatz, Laufzeitressourcen, Sicherheitsüberprüfung usw.) für das Hinzufügen der Abhängigkeit im Voraus.

In Bild oben, Tarball Größe ist tar.gz von Paket und Gesamtgröße ist Größe aller tarballs. Das Tool ist ziemlich einfach, aber es macht das, was es sagt.

Ein CLI-Tool ist ebenfalls verfügbar. Sie können es folgendermaßen installieren:

npm i -g download-size

Und benutze es so:

$ download-size request
request@2.83.0: 1.08 MiB

Der Quellcode ist auf Github verfügbar: API , CLI-Tool und Web-Client .

Ich habe Package Phobia Anfang dieses Jahres mit der Hoffnung erstellt, die Informationen zur Paketgröße auf npmjs.com zu übertragen und auch das Aufblähen von Paketen im Laufe der Zeit zu verfolgen.

https://packagephobia.com

Dies dient zum Messen des Speicherplatzes, nachdem Sie npm installfür serverseitige Abhängigkeiten wie expressoder Entwicklungsabhängigkeiten wie ausgeführt haben jest.

Weitere Informationen zu diesem Tool und ähnlichen Tools finden Sie in der Readme-Datei hier: https://github.com/styfle/packagephobia

Update 2020

Die "Unpacked Size" (im Grunde Publish Size) ist auf der Website npmjs.com zusammen mit "Total Files" verfügbar. Dies ist jedoch keine rekursive Bedeutung, npm installdie wahrscheinlich viel größer sein wird, da ein einzelnes Paket wahrscheinlich von vielen Paketen abhängt (daher ist Package Phobia immer noch relevant).

Es gibt auch einen ausstehenden RFC für eine Funktion, die diese Informationen von der CLI druckt.

Wenn Sie Webpack als Modulbündler verwenden, sehen Sie sich Folgendes an:

• Webpack-Bundle-Analyzer
• Webpack-Bundle-Size-Analyzer

Ich empfehle auf jeden Fall die erste Option. Es zeigt die Größe in einer interaktiven Baumkarte. Auf diese Weise können Sie die Größe des Pakets in Ihrer gebündelten Datei ermitteln.

Die anderen Antworten in diesem Beitrag zeigen die Größe des Projekts, aber Sie verwenden möglicherweise nicht alle Teile des Projekts, z. B. beim Baumschütteln. Andere Ansätze zeigen dann möglicherweise keine genaue Größe an.

Versuchen Sie verwenden Paket-Größe .

npx package-size vue,vue-router,vuex react,react-dom,react-router,redux

https://github.com/egoist/package-size

Wenn Sie Visual Studio Code verwenden, können Sie eine Erweiterung namens Import Cost verwenden .

Diese Erweiterung zeigt im Editor die Größe des importierten Pakets inline an. Die Erweiterung verwendet Webpack mit Babili-Webpack-Plugin, um die importierte Größe zu erkennen.

Sie können sich die npm-Modul-Statistiken ansehen . Es ist ein npm-Modul, das die Größe eines npm-Moduls und seine Abhängigkeiten erhält, ohne das Modul zu installieren oder herunterzuladen.

Verwendung:

var stats = require("npm-module-stats");

stats.getStats("glob").then((stack) => {

  let dependencies = Object.keys(stack);
  let totalSize = dependencies.reduce((result, key, index) => {
    return result + stack[key].size;
  }, 0);

  console.log('Total Size in Bytes ', totalSize);
  console.log('Total Dependencies ', dependencies.length-1);

}).catch((err) => {
  console.error(err);
});

Es mag etwas ausführlich erscheinen, löst aber das von Ihnen beschriebene Problem angemessen.

Eine "schnelle und schmutzige" Möglichkeit besteht darin, curl und wzrd.in zu verwenden, um das minimierte Paket schnell herunterzuladen und dann die Dateigröße zu ermitteln:

curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length

Der Download wird minimiert, aber nicht komprimiert, aber Sie erhalten eine gute Vorstellung von der relativen Größe von Paketen, wenn Sie zwei oder mehr davon vergleichen.

howfat ist ein weiteres Tool, das die Gesamtpaketgröße anzeigen kann:

npx howfat jasmine