Ir para o conteúdo
TextArray1.41.0
Totalmente local

Analisador de stats do webpack

Descubra quais pacotes e módulos ocupam mais espaço numa construção webpack.

Entrada
Saída
Ferramentas relacionadas
Analisador de tamanho JSONnovoFerramentas de desenvolvedor
Visão geral de dependências package.jsonnovoFerramentas de desenvolvedor
Calculadora de tamanho de compressãonovoFerramentas de desenvolvedor
diferença de chave i18nFerramentas de desenvolvedor
Conversor de TOML para JSONFerramentas de desenvolvedor
SQL para JSONFerramentas de desenvolvedor
Analisador de stats do webpack
Gere um stats.json do webpack (`webpack --json > stats.json`, ou com `stats: { modules: true }` na sua configuração) e cole-o aqui para ver exatamente quais pacotes e módulos estão a inchar o seu bundle. Esta é a forma mais rápida de responder "porque é que a minha construção é tão grande" sem instalar um plugin bundle-analyzer ou reconstruir com flags especiais — o relatório lê o JSON que já tem.
Agregue o relatório por pacote node_modules para ver qual dependência custa mais, por pasta para ver qual parte da sua própria árvore de código-fonte é mais pesada, ou deixe-o desagrupado para inspecionar módulos individuais um a um. A opção linhas-a-mostrar limita um relatório longo aos maiores infratores; percentagem do total coloca o tamanho de cada linha em contexto face ao total; e se o seu stats.json incluir um campo de tamanho comprimido por módulo (gzipSize ou sizeGzip), ativar a coluna de tamanho comprimido mostra ambos os números lado a lado. A filtragem por um ponto de entrada ou nome de chunk restringe tudo a um bundle, o que é útil quando uma aplicação tem mais do que um ficheiro de saída.
A ferramenta também marca pacotes que aparecem em mais de um caminho de instalação node_modules — um sinal comum de que duas dependências fixam versões incompatíveis da mesma biblioteca e o webpack acaba por enviar ambas as cópias. Essas linhas são marcadas na saída para que sejam fáceis de identificar mesmo num relatório longo. Escolha a saída de tabela para um relatório legível ou CSV para colar numa folha de cálculo quando está a acompanhar o tamanho do bundle ao longo do tempo.
Tudo funciona no seu navegador: o stats.json é analisado e processado localmente e nunca é carregado em qualquer lugar, portanto é seguro usar com uma base de código proprietária. Copie o resultado, descarregue-o como um ficheiro .txt, ou envie-o diretamente para a entrada de outra ferramenta para continuar a trabalhar.
FAQ
Como gero um stats.json?
Execute a construção webpack com `webpack --json > stats.json`, ou adicione `stats: { modules: true }` à sua configuração webpack para que o compilador imprima dados de módulos. A ferramenta precisa de uma matriz "modules" de nível superior para funcionar.
O que mostra o agrupamento por pacote que o agrupamento por pasta não mostra?
O agrupamento por pacote reduz todos os ficheiros sob node_modules/react (por exemplo) numa única linha, para que possa ver a pegada total de uma dependência. O agrupamento por pasta, em vez disso, relata os seus próprios diretórios de código-fonte, o que é mais útil para encontrar uma funcionalidade demasiado grande no seu próprio código.
Porque é que avisa sobre pacotes "duplicados"?
Quando duas dependências requerem cada uma uma versão diferente da mesma biblioteca, npm ou yarn podem colocar uma segunda cópia dentro de node_modules em vez de deduplicá-la. Esta ferramenta deteta um nome de pacote que aparece em mais de um caminho de instalação e marca-o, uma vez que remover a duplicação é frequentemente uma forma fácil de reduzir o tamanho do bundle.
Mostra tamanhos gzip reais se o meu stats.json não os incluir?
Não. O tamanho comprimido é mostrado apenas quando o seu stats.json já contém um campo gzipSize ou sizeGzip por módulo — a ferramenta nunca comprime nada por si própria, uma vez que isso significaria re-executar um passo de construção. Sem esse campo, a coluna de tamanho comprimido mostra um travessão.
O meu stats.json é carregado em algum lugar?
Não. A análise e o processamento correm inteiramente no seu navegador — o ficheiro nunca sai do seu dispositivo.