No desenvolvimento de aplicações modernas, é fácil perder o controle do tamanho do pacote final. Bibliotecas que prometem facilitar nossa vida podem, silenciosamente, inflar o main.js, prejudicando a experiência do usuário, especialmente em conexões móveis.

Recentemente, ao analisar o build do um projeto, identificamos um pacote inicial de 1.45 MB. Através do Webpack Bundle Analyzer, conseguimos visualizar os “vilões” da performance e traçar um plano de ação.

🛠️ Passo a Passo: Como instalar e usar o Analisador Link para o cabeçalho

Para realizar esse “raio-X” na sua própria aplicação, siga estes passos:

1. Instalação Link para o cabeçalho

Você pode instalar o analisador globalmente no seu sistema:

npm install -g webpack-bundle-analyzer

2. Gerar o Build com Estatísticas Link para o cabeçalho

O Angular precisa gerar um arquivo JSON contendo os metadados do build. Execute o comando:

ng build --configuration production --stats-json

Isso criará um arquivo chamado stats.json dentro da sua pasta dist/nome-do-projeto.

3. Executar a Análise Link para o cabeçalho

Agora, aponte o analisador para o arquivo gerado:

webpack-bundle-analyzer dist/seu-projeto/stats.json

Uma aba será aberta automaticamente no seu navegador (geralmente em localhost:8888) exibindo o mapa visual do seu código.

🔍 O que o Raio-X nos revelou? Link para o cabeçalho

Ao olhar para o gráfico, identificamos dois grandes blocos que poderiam ser otimizados:

1. O Caso Moment.js: O Peso das “Locales” Link para o cabeçalho

O moment.js é uma biblioteca clássica, mas tem um custo alto. Por padrão, ele importa arquivos de localização (locales) para dezenas de idiomas (Russo, Indiano, Ucraniano, etc.), mesmo que seu app use apenas Português.

A Sugestão: Migrar para date-fns Diferente do Moment, o date-fns é modular.

  • Exemplo de economia: Se você precisa apenas formatar uma data, você importa apenas a função format. O restante da biblioteca nem sequer entra no seu build.

  • Imutabilidade: Enquanto o Moment altera o objeto original, o date-fns retorna uma nova data, evitando bugs de referência.

2. SweetAlert2 e jsPDF: Carregamento Sob Demanda Link para o cabeçalho

Bibliotecas como o SweetAlert2 (alertas) e o jsPDF (PDFs) apareciam no bloco principal (main.js). Isso significa que o usuário baixava esse código antes mesmo de precisar dele.

Técnica de Dynamic Import Podemos carregar essas dependências apenas “on-demand” (quando o usuário clica em um botão, por exemplo):

async gerarRelatorio() {
  const { jsPDF } = await import('jspdf'); // Carrega apenas ao disparar a função
  const doc = new jsPDF();
  doc.text("Relatório", 10, 10);
  doc.save("doc.pdf");
}

📈 Conclusão Link para o cabeçalho

Otimizar uma aplicação não é sobre deletar funcionalidades, mas sobre entrega inteligente. Usar o Bundle Analyzer regularmente permite tomar decisões baseadas em dados, garantindo que seu projeto Angular continue rápido e eficiente à medida que cresce.