Comment afficher la taille des packages npm?

Lorsque je recherche des packages sur NPM, j'aimerais voir la taille des packages (en Ko ou Mo, etc.). NPM ne semble pas afficher ces informations.

Comment puis-je déterminer la quantité de ballonnements qu'un package NPM ajoutera à mon projet?

Ce que vous voulez probablement mesurer, c'est l'impact d'un package si vous l'ajoutez à votre ensemble d'applications. La plupart des autres réponses estiment uniquement la taille des fichiers source, ce qui peut être inexact en raison de commentaires en ligne, de longs noms de var, etc.

Il y a un petit utilitaire que j'ai créé qui vous indiquera la taille min + gzippée du paquet une fois qu'il est entré dans votre paquet -

https://bundlephobia.com

Jetez un œil à ce projet de coût des modules . C'est un package npm qui listera la taille d'un package et le nombre d'enfants.

Installation: npm install -g cost-of-modules

Utilisation: exécutez cost-of-modulesdans le répertoire dans lequel vous travaillez.

J'ai créé un outil, npm download size , qui inspecte la taille de l'archive tar pour un package npm donné, y compris toutes les archives tar de l'arborescence des dépendances. Cela vous donne une idée du coût (temps d'installation, espace disque, ressources d'exécution, audit de sécurité, ...) d'ajout de la dépendance à l'avance.

Dans l'image ci-dessus, la taille de Tarball est tar.gz du package, et la taille totale est la taille de toutes les tarballs. L'outil est assez basique, mais il fait ce qu'il dit.

Un outil cli est également disponible. Vous pouvez l'installer comme ceci:

npm i -g download-size

Et utilisez-le comme ceci:

$ download-size request
request@2.83.0: 1.08 MiB

Le code source est disponible sur Github: api , outil cli et client web .

J'ai créé Package Phobia au début de cette année avec l'espoir d'obtenir les informations sur la taille du paquet sur npmjs.com et de suivre également le gonflement des paquets au fil du temps.

https://packagephobia.com

Ceci est conçu pour mesurer l'espace disque après avoir exécuté npm installdes dépendances côté serveur comme expressou des dépendances de développement comme jest.

Vous pouvez en savoir plus sur cet outil et d'autres outils similaires dans le readme ici: https://github.com/styfle/packagephobia

Mise à jour 2020

La "Taille Unpacked" (essentiellement Publish Size) est disponible sur le site Web npmjs.com avec "Total Files". Cependant, ce n'est pas une signification récursive qui npm installsera probablement beaucoup plus grande car un seul paquet dépend probablement de nombreux paquets (donc Package Phobia est toujours pertinent).

Il existe également un RFC en attente pour une fonctionnalité qui imprime ces informations à partir de l'interface de ligne de commande.

Si vous utilisez webpack comme bundle de modules, jetez un œil à:

• analyseur de paquets web
• analyseur de taille de bundle webpack

Je recommande vraiment la première option. Il montre la taille dans le treemap interactif. Cela vous aide à trouver la taille du package dans votre fichier groupé.

Les autres réponses de cet article vous montrent la taille du projet, mais vous n'utilisez peut-être pas toutes les parties du projet, par exemple avec le tremblement de l'arbre. D'autres approches pourraient alors ne pas vous montrer la taille exacte.

Essayez d'utiliser la taille du paquet .

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

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

Si vous utilisez Visual Studio Code, vous pouvez utiliser une extension appelée Import Cost .

Cette extension affichera en ligne dans l'éditeur la taille du package importé. L'extension utilise webpack avec babili-webpack-plugin afin de détecter la taille importée.

Vous pouvez consulter npm-module-stats . C'est un module npm qui obtient la taille d'un module npm et ses dépendances sans installer ni télécharger le module.

Usage:

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

Cela peut sembler un peu verbeux, mais cela résout le problème que vous avez décrit de manière appropriée.

Une manière "rapide et sale" consiste à utiliser curl et wzrd.in pour télécharger rapidement le paquet minifié, puis grep la taille du fichier:

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

Le téléchargement est minifié mais pas gzippé, mais vous avez une bonne idée de la taille relative des packages lorsque vous comparez deux ou plusieurs d'entre eux.

howfat est un autre outil qui peut afficher la taille totale du paquet:

npx howfat jasmine