AVISO nos orçamentos, máximo excedido para o valor inicial

Quando construo meu projeto angular 7 com --prod, tenho um aviso nos orçamentos.

Eu tenho um projeto angular 7, quero construí-lo, mas tenho um aviso:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

estes são detalhes do pedaço:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

o que exatamente são os orçamentos? e como devo gerenciá-los?

Abra o arquivo angular.json e encontre a budgetspalavra-chave.

Deve parecer com:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

Como você provavelmente adivinhou, pode aumentar o maximumWarningvalor para evitar esse aviso, ou seja:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

O que significa orçamentos ?

Um orçamento de desempenho é um grupo de limites para certos valores que afetam o desempenho do site, que não podem ser excedidos no design e desenvolvimento de qualquer projeto da web.

No nosso caso, o orçamento é o limite para tamanhos de pacote.

Veja também:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Orçamentos de desempenho (mantenha a contagem de solicitações baixa e os tamanhos de arquivo pequenos)

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 ...

1. Podemos ter experimentado nosso recurso e não ter limpado adequadamente
2. Nossas ferramentas podem dar errado e executar uma importação automática incorreta ou escolhemos um item incorreto na lista de importações sugerida
3. Podemos importar coisas de módulos preguiçosos em locais inadequados
4. 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.

1. npm install -g webpack-bundle-analyzer
2. No seu aplicativo Angular, execute ng build --stats-json(não use sinalizador --prod). Ao ativar, --stats-jsonvocê obterá um arquivo adicional stats.json
3. 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