webpack/webpack-bundle-analyzer

O que é?

Recursos principais

• 01Treemap interativo com zoom dos módulos do bundle
• 02Funciona como plugin do webpack ou CLI independente para arquivos de stats
• 03Analisa bundles minificados para mostrar o tamanho real dos módulos
• 04Informa os tamanhos stat, parsed, gzip, Brotli e Zstandard
• 05Gera um servidor HTTP, um relatório HTML estático ou um arquivo JSON
• 06Filtra chunks pela barra lateral ou pelo menu de contexto

Casos de uso

• Encontrar dependências grandes ou incluídas por engano em um projeto webpack
• Acompanhar as mudanças no tamanho do bundle ao longo das otimizações
• Inspecionar um bundle a partir de um stats.json existente em CI ou em um servidor
• Gerar um relatório estático do bundle para compartilhar com a equipe

Início rápido

1. 1

   Instale o plugin como dependência de desenvolvimento com npm

   npm install --save-dev webpack-bundle-analyzer
2. 2

   Adicione BundleAnalyzerPlugin ao array plugins da configuração do webpack e execute o webpack

Antes de usar

• !Analisa apenas bundles do webpack, portanto não ajuda com a saída de outros bundlers.

Em coleções

Tópicos

Perguntas frequentes

O que é webpack-bundle-analyzer?

Plugin e CLI para webpack que mostram o conteúdo dos bundles em um treemap interativo com zoom, destacando os módulos que ocupam mais espaço. O Webpack Bundle Analyzer ajuda desenvolvedores a ver o que realmente há na saída do webpack. Ele representa cada bundle em um treemap interativo com zoom, no qual cada retângulo corresponde a um módulo, facilitando a identificação dos maiores responsáveis pelo tamanho do bundle. A ferramenta é útil para encontrar módulos incluídos por engano e decidir onde otimizar.

webpack-bundle-analyzer é gratuito? Qual é a licença?

webpack-bundle-analyzer é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

webpack-bundle-analyzer ainda é mantido?

Manutenção ativa. O último commit de webpack-bundle-analyzer foi em 6 de nov. de 2026.

Para que posso usar webpack-bundle-analyzer?

Encontrar dependências grandes ou incluídas por engano em um projeto webpack Acompanhar as mudanças no tamanho do bundle ao longo das otimizações Inspecionar um bundle a partir de um stats.json existente em CI ou em um servidor Gerar um relatório estático do bundle para compartilhar com a equipe

Como instalar webpack-bundle-analyzer?

Instale o plugin como dependência de desenvolvimento com npm: npm install --save-dev webpack-bundle-analyzer Adicione BundleAnalyzerPlugin ao array plugins da configuração do webpack e execute o webpack

Onde consigo webpack-bundle-analyzer?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/webpack/webpack-bundle-analyzer