¿Cómo veo el tamaño de los paquetes npm?

Cuando busco paquetes en NPM, me gustaría ver los tamaños de los paquetes (en KB o MB, etc.). NPM no parece mostrar esta información.

¿Cómo puedo determinar cuánta hinchazón agregará un paquete NPM a mi proyecto?

Lo que probablemente quiera medir es el impacto que tiene un paquete si lo agrega a su paquete de aplicaciones. La mayoría de las otras respuestas solo estimarán el tamaño de los archivos de origen, que pueden ser inexactos debido a comentarios en línea, nombres largos de var, etc.

Hice una pequeña utilidad que le dirá el tamaño min + gzipped del paquete después de que entre en su paquete:

https://bundlephobia.com

Eche un vistazo a este proyecto de costo de módulos . Es un paquete npm que enumerará el tamaño de un paquete y la cantidad de hijos.

Instalación: npm install -g cost-of-modules

Uso: Ejecútelo cost-of-modulesen el directorio en el que está trabajando.

Creé una herramienta, npm download size , que inspecciona el tamaño del tarball para un paquete npm dado, que incluye todos los tarballs en el árbol de dependencias. Esto le da una idea del costo (tiempo de instalación, espacio en disco, recursos de tiempo de ejecución, auditoría de seguridad, ...) de agregar la dependencia por adelantado.

En la imagen de arriba, el tamaño del tarball es tar.gz del paquete, y el tamaño total es el tamaño de todos los tarballs. La herramienta es bastante básica, pero hace lo que dice.

Una herramienta cli también está disponible. Puedes instalarlo así:

npm i -g download-size

Y úsalo así:

$ download-size request
request@2.83.0: 1.08 MiB

El código fuente está disponible en Github: api , herramienta cli y cliente web .

Creé Package Phobia a principios de este año con la esperanza de obtener la información del tamaño del paquete en npmjs.com y también rastrear la hinchazón del paquete con el tiempo.

https://packagephobia.com

Esto está diseñado para medir el espacio en disco después de ejecutar npm installdependencias del lado del servidor expresso dependencias de desarrollo como jest.

Puede leer más sobre esta herramienta y otras herramientas similares en el archivo Léame aquí: https://github.com/styfle/packagephobia

Actualización 2020

El "Tamaño desempaquetado" (básicamente Tamaño de publicación) está disponible en el sitio web npmjs.com junto con "Archivos totales". Sin embargo, esto no es un significado recursivo que npm installprobablemente sea mucho más grande porque un solo paquete probablemente depende de muchos paquetes (por lo tanto, Package Phobia sigue siendo relevante).

También hay un RFC pendiente para una función que imprime esta información desde la CLI.

En caso de que esté utilizando webpack como paquete de módulos, eche un vistazo a:

• analizador de paquetes web
• analizador de tamaño de paquete webpack

Definitivamente recomiendo la primera opción. Muestra el tamaño en el mapa de árbol interactivo. Esto le ayuda a encontrar el tamaño del paquete en su archivo incluido.

Las otras respuestas en esta publicación muestran el tamaño del proyecto, pero es posible que no esté utilizando todas las partes del proyecto, por ejemplo, con sacudidas de árboles. Otros enfoques podrían no mostrarle el tamaño exacto.

Intenta usar el tamaño del paquete .

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

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

Si usa Visual Studio Code, puede usar una extensión llamada Import Cost .

Esta extensión mostrará en línea en el editor el tamaño del paquete importado. La extensión utiliza webpack con babili-webpack-plugin para detectar el tamaño importado.

Puede consultar npm-module-stats . Es un módulo npm que obtiene el tamaño de un módulo npm y sus dependencias sin instalar o descargar el módulo.

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

Puede parecer un poco detallado, pero resuelve el problema que describió adecuadamente.

Una forma "rápida y sucia" es usar curl y wzrd.in para descargar rápidamente el paquete minimizado y luego seleccionar el tamaño del archivo:

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

La descarga se minimiza pero no se comprime, pero tiene una buena idea del tamaño relativo de los paquetes cuando compara dos o más de ellos.

howfat es una herramienta más que puede mostrar el tamaño total del paquete:

npx howfat jasmine