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

129

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?

Arielorvits
quelle
Hijacking dieses Gesprächs, weil ich auf ein Tool hinweisen möchte, mit dem Sie freien Speicherplatz von Ihrem Computer beanspruchen können. Anscheinend node_modulesbesetzen atm 21bg auf meiner Maschine; npkillkann Ihnen dabei helfen ! [Bildbeschreibung hier eingeben ] ( i.stack.imgur.com/BKbyU.png )
Ahmad Alfy

Antworten:

181

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

Shubham Kanodia
quelle
5
Vielen Dank! Das ist ein wirklich schöner Gebrauch!
BaronVonKaneHoffen
3
Schöne Benutzeroberfläche! Danke, genau das habe ich gesucht. Dauert ewig bei super großen Paketen.
Protoevangelion
3
@ Black sollte wieder da sein
Shubham Kanodia
6
Dieser Link führt https://cost-of-modules.herokuapp.comjetzt zu https://bundlephobia.com einem sehr nützlichen Tool.
Adam Weber
4
Das ist cool genug, dass es nur zu den npm-Seiten für jedes Paket hinzugefügt werden sollte
eddiemoya
69

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.

Geben Sie hier die Bildbeschreibung ein

Liron Yahdav
quelle
2
Ein bisschen übertrieben, es muss alle Ihre Module vor der Berechnung neu installieren. Aber macht den Job.
pdem
7
Verwenden Sie dieses Paket nicht - es erstellt einen Artefaktordner namens nodemodules.bak, der hässliche Nebenwirkungen verursacht
Nth.gol
22

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.

Download-Größe des Webpacks

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
[email protected]: 1.08 MiB

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

arve0
quelle
20

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

img

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.

styfle
quelle
Das ist großartig, aber warum unterscheiden sich die Ergebnisse so stark von der Bündelphobie? zB vergleiche die Ergebnisse für lodash.lowerfirst
Danyal Aytekin
2
@DanyalAytekin Weil sie verschiedene Dinge messen. Kurze Antwort: Wenn Sie sich ein Front-End-Paket ansehen, verwenden Sie BundlePhobia. Wenn Sie sich ein Back-End-Paket ansehen, verwenden Sie PackagePhobia. Weitere Informationen finden Sie in der Readme-Datei, wenn Sie interessiert sind.
Styfle
16

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

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.

Webpack Bundle Analyzer

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.

Schwarz
quelle
10

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 Paketgröße npm

c01nd01r
quelle
4

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.

kyw
quelle
Auch für WebStorm verfügbar.
JoeTidee
Diese Erweiterung funktioniert nicht für alle Pakete. Es zeigt Berechnen ... und verschwindet dann plötzlich, selbst nachdem der Timeout-Wert auf eine sehr große Zahl
geändert wurde
2

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.

bkk
quelle
1
Was ist mit Deps der 2. Ebene?
Sharikov Vladislav
2

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.

Thoragio
quelle
2
Verwenden Sie dann einen anderen Dienst wie unpkg.com . Beispiel:curl -i https://unpkg.com/[email protected]/dist/axios.min.js | grep Content-Length
Thoragio
2

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

npx howfat jasmine

Screensot

Alexey Prokhorov
quelle