Come posso visualizzare la dimensione dei pacchetti npm?

Quando cerco pacchetti su NPM, vorrei vedere le dimensioni dei pacchetti (in KB o MB, ecc.). NPM non sembra mostrare queste informazioni.

Come posso determinare quanto gonfio aggiungerà un pacchetto NPM al mio progetto?

Quello che probabilmente vuoi misurare è l'impatto che un pacchetto ha se lo dovessi aggiungere al tuo pacchetto di app. La maggior parte delle altre risposte stimerà solo le dimensioni dei file di origine, che potrebbero essere inaccurate a causa di commenti incorporati, nomi di variabili lunghe ecc.

C'è una piccola utility che ho creato che ti dirà la dimensione min + gzipped del pacchetto dopo che è entrato nel tuo bundle -

https://bundlephobia.com

Dai un'occhiata a questo progetto sul costo dei moduli . È un pacchetto npm che elenca le dimensioni di un pacchetto e il numero di figli.

Installazione: npm install -g cost-of-modules

Utilizzo: esegui cost-of-modulesnella directory in cui stai lavorando.

Ho creato uno strumento, la dimensione di download di npm , che controlla le dimensioni di tarball per un determinato pacchetto npm, inclusi tutti i tarball nella struttura delle dipendenze. Questo ti dà un'idea del costo (tempo di installazione, spazio su disco, risorse di runtime, audit di sicurezza, ...) di aggiungere la dipendenza in anticipo.

Nell'immagine sopra, la dimensione di Tarball è tar.gz del pacchetto e la dimensione totale è la dimensione di tutti i tarball. Lo strumento è piuttosto semplice, ma fa quello che dice.

È disponibile anche uno strumento cli . Puoi installarlo in questo modo:

npm i -g download-size

E usalo in questo modo:

$ download-size request
request@2.83.0: 1.08 MiB

Il codice sorgente è disponibile su Github: api , strumento cli e client web .

Ho creato Package Phobia all'inizio di quest'anno con la speranza di ottenere le informazioni sulla dimensione del pacchetto in npmjs.com e di tenere traccia del gonfiamento del pacchetto nel tempo.

https://packagephobia.com

Questo è progettato per misurare lo spazio su disco dopo l'esecuzione npm installper dipendenze lato server come expresso dipendenze dev come jest.

Puoi leggere ulteriori informazioni su questo strumento e altri strumenti simili nel file Leggimi qui: https://github.com/styfle/packagephobia

Aggiornamento 2020

La "Dimensione non compressa" (sostanzialmente Dimensione pubblicazione) è disponibile sul sito Web npmjs.com insieme a "File totali". Tuttavia, questo non è un significato ricorsivo che npm installprobabilmente sarà molto più grande perché un singolo pacchetto probabilmente dipende da molti pacchetti (quindi il pacchetto Phobia è ancora rilevante).

C'è anche un RFC in sospeso per una funzione che stampa queste informazioni dalla CLI.

Nel caso in cui si stia utilizzando il webpack come bundler del modulo, consultare:

• webpack-fascio-analizzatore
• webpack-fascio-size-analizzatore

Consiglio vivamente la prima opzione. Mostra le dimensioni nella mappa treem interattiva. Questo ti aiuta a trovare la dimensione del pacchetto nel tuo file in bundle.

Le altre risposte in questo post mostrano le dimensioni del progetto, ma potresti non utilizzare tutte le parti del progetto, ad esempio con la vibrazione degli alberi. Altri approcci potrebbero non mostrare dimensioni precise.

Prova a utilizzare le dimensioni del pacchetto .

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

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

Se si utilizza il codice di Visual Studio, è possibile utilizzare un'estensione denominata Costo di importazione .

Questa estensione mostrerà in linea nell'editor le dimensioni del pacchetto importato. L'estensione utilizza webpack con babili-webpack-plugin per rilevare la dimensione importata.

Puoi dare un'occhiata a npm-module-stats . È un modulo npm che ottiene le dimensioni di un modulo npm e le sue dipendenze senza installare o scaricare il modulo.

Uso:

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);
});

Potrebbe sembrare un po 'prolisso ma risolve il problema che hai descritto in modo appropriato.

Un modo "rapido e sporco" è usare curl e wzrd.in per scaricare rapidamente il pacchetto minimizzato e quindi grep la dimensione del file:

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

Il download è ridotto al minimo ma non compresso con gzip, ma si ottiene una buona idea della dimensione relativa dei pacchetti quando si confrontano due o più di essi.

howfat è un altro strumento che può mostrare la dimensione totale del pacchetto:

npx howfat jasmine