Codeblox Blog
Analisando os arquivos .js gerados pelo Angular
A equipe do Angular tem incentivado a criação de aplicações mais otimizadas e a partir da versão 12 uma nova aplicação no modo strict já começa com cotas de tamanho bem menores para os arquivos .js gerados em sua compilação (com uma redução de cerca de 75% em relação ao padrão anterior).
Na prática, antes você receberia um alerta caso algum arquivo javascript superasse 2mb. Agora o alerta aparece ao passar os 500kb.
Da mesma forma, ocorreria um erro caso o pacote passasse 5mb. Agora o erro ocorre ao passar 1mb.
É claro que você pode ajustar estas cotas no arquivo angular.json, neste trecho da configuração:
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
…mas, ao invés de abrir a porteira para geração de grandes arquivos, o melhor seria entender o motivo pelo qual certos arquivos estão com um tamanho grande e agir para limpá-los e/ou quebrá-los em mais módulos.
Existem ferramentas que ajudam a entender a composição dos arquivos gerados. No passado utilizei uma ferramenta chamada webpack-bundle-analyze mas, segundo a equipe do Angular, ela não interpreta corretamente o processo de compilação do Angular.
O time do Angular recomenta o uso do source-map-explorer.
Instale a ferramenta globalmente:
npm i -g source-map-explorer
E então realize uma compilação do seu projeto com os seguintes parametros:
ng build --configuration production --sourceMap=true --namedChunks=true
Copie o caminho do arquivo .js que deseja analisar (muitas vezes o problema é o main crescer demais).
Coloco aqui uma ilustração imaginando que você esteja trabalhando no VSCode:
Execute o source-map-explorer sobre o arquivo:
source-map-explorer dist\projeto\main.757cdab48eab2ace1089.js
Caso não queira usar o caminho exato, a ferramenta também funciona chamando por padrão:
source-map-explorer dist\projeto\*.js
Após execução, será aberto um html com blocos navegáveis que representam o quanto seu código e as bibliotecas instaladas estão consumindo neste aquivo.
Algo assim:
