Visualizador de tamanho de bundle do Webpack

• Visualização instantânea do bundle do Webpack: visualize o tamanho do bundle do webpack instantaneamente no navegador - sem envio para servidor e sem ferramentas de build. Nosso visualizador de tamanho de bundle do webpack analisa seu JSON de estatísticas e gera barras de tamanho interativas para pacotes, módulos e chunks.
• Visualizador de tamanho de bundle do Webpack online seguro: seu JSON de estatísticas do webpack nunca sai do seu dispositivo ao usar este visualizador. O processamento 100 % no lado do cliente significa privacidade total - sem armazenamento em nuvem, sem logs de servidor e sem exposição do código-fonte.
• Visualizador de tamanho de bundle do Webpack sem instalação: visualize o tamanho do bundle do webpack diretamente no navegador sem pacotes npm, sem configurar o webpack-bundle-analyzer e sem conta. Este visualizador de tamanho de bundle do webpack grátis funciona em qualquer navegador moderno.
• Recomendações de otimização e análise de pacotes: receba recomendações práticas de otimização para suas principais dependências - moment.js, lodash, d3, MUI, chart.js e muitas outras. Veja a composição do bundle (node_modules versus código do app) e a contribuição de tamanho de cada pacote.

• Cumprimento do orçamento de tamanho do bundle: use o visualizador de tamanho de bundle do webpack para verificar se o seu bundle cabe no seu orçamento de desempenho antes de cada deploy. Veja quais pacotes são os maiores contribuintes e identifique regressões cedo.
• Auditoria e substituição de dependências: use o visualizador de tamanho de bundle do webpack para identificar dependências grandes demais, como moment.js (290 KB) ou lodash (71 KB). O painel de recomendações de otimização sugere alternativas mais leves para os casos mais comuns.
• Verificação do tree-shaking: use o visualizador de tamanho de bundle do webpack para verificar se o tree-shaking está funcionando corretamente. Se um pacote mostra muitos módulos pequenos em vez de um único bundle grande, o tree-shaking está ativo e funcionando como esperado.
• Otimização de Core Web Vitals: use o visualizador de tamanho de bundle do webpack para identificar os maiores bundles JavaScript que afetam suas pontuações de LCP e FID. Reduzir o tamanho do bundle principal melhora diretamente o Time to Interactive e o First Input Delay.
• Relatórios de desempenho para clientes: use o visualizador de tamanho de bundle do webpack para gerar dados de composição do bundle para relatórios de desempenho de clientes. Mostre a divisão entre node_modules e código do app, os principais pacotes por tamanho e oportunidades específicas de otimização.
• Análise de divisão de código: use o visualizador de tamanho de bundle do webpack para analisar os tamanhos dos chunks e identificar oportunidades de code splitting. A visão de chunk mostra quais chunks são os maiores e quantos módulos cada um contém.

Um visualizador de tamanho de bundle do webpack analisa a saída JSON da API de estatísticas do webpack e exibe um detalhamento visual de quais módulos e pacotes mais contribuem para o tamanho do seu bundle. Nosso visualizador de tamanho de bundle do webpack lê os arrays modules, chunks e assets do JSON de estatísticas do webpack e agrega os tamanhos de módulo por nome de pacote - mostrando exatamente quais dependências de node_modules são as maiores. Toda a análise roda inteiramente no seu navegador com JavaScript puro - sem envio para servidor e sem instalar o webpack-bundle-analyzer.

1. 1 Gere seu JSON de estatísticas do webpack: execute webpack --json > stats.json ou next build --debug . Depois cole o conteúdo de stats.json na área de entrada, ou envie o arquivo diretamente.
2. 2 Análise instantânea no navegador: clique em «Visualizar bundle» e o visualizador de tamanho de bundle do webpack analisa o JSON, agrega os tamanhos de módulo por nome de pacote e gera barras de tamanho para pacotes, módulos e chunks. Nenhum dado é enviado a servidor algum.
3. 3 Revise a visualização e as recomendações: alterne entre as visões de pacote, módulo e chunk. O painel de recomendações de otimização traz sugestões específicas para as maiores dependências do seu bundle.

• Composição do bundle: uma barra visual mostrando a divisão entre node_modules (dependências de terceiros) e código do app - a maioria dos bundles é 70-90 % node_modules, que é o principal alvo de otimização.
• Visão de pacote: todos os pacotes de node_modules agregados por nome e ordenados por tamanho total - mostra quais dependências mais contribuem para o seu bundle.
• Visão de módulo: os 20 módulos individuais maiores por tamanho - útil para identificar arquivos específicos inesperadamente grandes.
• Visão de chunk: todos os chunks do webpack ordenados por tamanho - útil para identificar oportunidades de code splitting e entender a estrutura do seu bundle.

Para webpack: execute webpack --json > stats.json ou adicione {" "} à sua configuração do webpack. Para Next.js: execute next build --debug e procure o arquivo de estatísticas em .next/. Para Create React App: use o source-map-explorer ou eject para acessar a configuração do webpack. O visualizador de tamanho de bundle do webpack aceita qualquer JSON de estatísticas do webpack - o formato é consistente entre webpack 4 e webpack 5.