O que são orçamentos de CLI angulares?
Orçamentos é um dos recursos menos conhecidos da CLI Angular. É um recurso bastante pequeno, mas muito interessante!
À medida que os aplicativos crescem em funcionalidade, eles também aumentam de tamanho. Orçamentos é um recurso da CLI Angular que permite definir limites de orçamento em sua configuração para garantir que partes do seu aplicativo permaneçam dentro dos limites que você definiu - Documentação Oficial
Ou, em outras palavras, podemos descrever nosso aplicativo Angular como um conjunto de arquivos JavaScript compilados chamados pacotes configuráveis, produzidos pelo processo de construção. Orçamentos angulares nos permitem configurar os tamanhos esperados desses pacotes. Além disso, podemos configurar limites para condições quando queremos receber um aviso ou até falhar na compilação com um erro se o tamanho do pacote ficar muito fora de controle!
Como definir um orçamento?
Orçamentos angulares são definidos no arquivo angular.json. Os orçamentos são definidos por projeto, o que faz sentido, pois cada aplicativo em um espaço de trabalho tem necessidades diferentes.
Pensando pragmaticamente, só faz sentido definir orçamentos para as construções de produção. A criação do Prod cria pacotes configuráveis com "tamanho real" após a aplicação de todas as otimizações, como trepidação de árvores e minimização de código.
Ops, um erro de compilação! O tamanho máximo do pacote configurável foi excedido. Este é um ótimo sinal que nos diz que algo deu errado ...
- Podemos ter experimentado nosso recurso e não ter limpado adequadamente
- Nossas ferramentas podem dar errado e executar uma importação automática incorreta ou escolhemos um item incorreto na lista de importações sugerida
- Podemos importar coisas de módulos preguiçosos em locais inadequados
- Nosso novo recurso é realmente muito grande e não se encaixa nos orçamentos existentes
Primeira abordagem: seus arquivos foram compactados em gzip?
De um modo geral, o arquivo compactado com gzip tem apenas cerca de 20% do tamanho do arquivo original, o que pode diminuir drasticamente o tempo de carregamento inicial do seu aplicativo. Para verificar se você compactou seus arquivos com zip, basta abrir a guia de rede do console do desenvolvedor. Nos "Cabeçalhos de resposta", se você vir "Codificação de conteúdo: gzip", estará pronto.
Como gzip?
Se você hospedar seu aplicativo Angular na maioria das plataformas em nuvem ou CDN, não se preocupe com esse problema, pois eles provavelmente resolveram isso para você. No entanto, se você possui seu próprio servidor (como NodeJS + expressJS) atendendo ao seu aplicativo Angular, verifique definitivamente se os arquivos foram compactados em gzip. A seguir, é apresentado um exemplo para compactar seus ativos estáticos em um aplicativo NodeJS + expressJS. Você dificilmente pode imaginar que essa “compactação” simples de middleware reduziria o tamanho do pacote de 2,21 MB para 495,13 KB.
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())
Segunda Abordagem :: Analise seu Pacote Angular
Se o tamanho do seu pacote ficar muito grande, convém analisá-lo porque você pode ter usado um pacote de terceiros de tamanho grande inadequado ou se esqueceu de remover algum pacote se não o estiver usando mais. O Webpack possui um recurso incrível para nos dar uma idéia visual da composição de um pacote webpack.
É super fácil obter esse gráfico.
npm install -g webpack-bundle-analyzer- No seu aplicativo Angular, execute
ng build --stats-json(não use sinalizador --prod). Ao ativar, --stats-jsonvocê obterá um arquivo adicional stats.json
- Por fim, execute
webpack-bundle-analyzer ./dist/stats.jsone seu navegador exibirá a página em localhost: 8888. Divirta-se com isso.
ref 1: Como os orçamentos de CLI angular salvaram meu dia e como eles podem salvar o seu
ref 2: Otimize o tamanho do pacote angular em 4 etapas