Como visualizo o tamanho dos pacotes npm?

Ao procurar pacotes no NPM, gostaria de ver os tamanhos dos pacotes (em KB ou MB, etc). O NPM parece não mostrar essas informações.

Como posso determinar quanto inchaço um pacote NPM adicionará ao meu projeto?

O que você provavelmente deseja avaliar é o impacto que um pacote tem para adicioná-lo ao pacote de aplicativos. A maioria das outras respostas estimará apenas o tamanho dos arquivos de origem, que podem ser imprecisos devido a comentários embutidos, nomes longos de var etc.

Há um pequeno utilitário que eu criei que informa o tamanho min + gzipped do pacote depois que ele entra no seu pacote -

https://bundlephobia.com

Dê uma olhada neste projeto de custo de módulos . É um pacote npm que lista o tamanho de um pacote e o número de filhos.

Instalação: npm install -g cost-of-modules

Uso: Execute cost-of-modulesno diretório em que você está trabalhando.

Criei uma ferramenta, tamanho do download npm , que inspeciona o tamanho do tarball para um determinado pacote npm, incluindo todos os tarballs na árvore de dependência. Isso fornece uma idéia do custo (tempo de instalação, espaço em disco, recursos de tempo de execução, auditoria de segurança, ...) da adição da dependência antecipadamente.

Na imagem acima, o tamanho do Tarball é tar.gz do pacote e o tamanho total é o tamanho de todos os tarballs. A ferramenta é bastante básica, mas faz o que diz.

Uma ferramenta CLI também está disponível. Você pode instalá-lo assim:

npm i -g download-size

E use-o assim:

$ download-size request
request@2.83.0: 1.08 MiB

O código fonte está disponível no Github: api , cli tool e web client .

Criei o Package Phobia no início deste ano com a esperança de obter as informações sobre o tamanho do pacote no npmjs.com e também acompanhar o inchaço do pacote ao longo do tempo.

https://packagephobia.com

Isso foi desenvolvido para medir o espaço em disco após a execução npm installde dependências do lado do servidor, como expressdependências do dev jest.

Você pode ler mais sobre esta ferramenta e outras ferramentas semelhantes no leia-me aqui: https://github.com/styfle/packagephobia

Atualização 2020

O "Tamanho descompactado" (basicamente tamanho de publicação) está disponível no site npmjs.com, juntamente com o "Total de arquivos". No entanto, esse não é um significado recursivo que npm installprovavelmente será muito maior porque um único pacote provavelmente depende de muitos pacotes (portanto, o Package Phobia ainda é relevante).

Há também um RFC pendente para um recurso que imprime essas informações a partir da CLI.

Caso você esteja usando o webpack como seu bundler de módulo, consulte:

• analisador de pacotes da web
• Analisador de tamanho de pacote da Webpack

Definitivamente, recomendo a primeira opção. Ele mostra o tamanho no mapa da árvore interativo. Isso ajuda você a encontrar o tamanho do pacote no seu arquivo em pacote.

As outras respostas nesta postagem mostram o tamanho do projeto, mas você pode não estar usando todas as partes do projeto, por exemplo, com trepidação de árvores. Outras abordagens podem não mostrar o tamanho exato.

Tente usar o tamanho do pacote .

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

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

Se você usar o Código do Visual Studio, poderá usar uma extensão chamada Custo de Importação .

Esta extensão exibirá em linha no editor o tamanho do pacote importado. A extensão utiliza o webpack com o babili-webpack-plugin para detectar o tamanho importado.

Você pode conferir o npm-module-stats . É um módulo npm que obtém o tamanho de um módulo npm e suas dependências sem instalar ou fazer download do 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);
});

Pode parecer um pouco detalhado, mas resolve o problema que você descreveu adequadamente.

Uma maneira "rápida e suja" é usar curl e wzrd.in para baixar rapidamente o pacote minificado e depois cumprimentar o tamanho do arquivo:

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

O download é reduzido, mas não compactado, mas você tem uma boa idéia do tamanho relativo dos pacotes quando compara dois ou mais deles.

howfat é mais uma ferramenta que pode mostrar o tamanho total do pacote:

npx howfat jasmine