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

155

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?

Masoud Bimar
fonte
4
Tente comprimir suas imagens em ativos em vez de editar o arquivo angular.json
Ahsan
@ Ahsan foi o que eu fiz. Ainda a mesma mensagem. Não tenho certeza se trata de ativos.
Emerica
@Curse Wee minha nova resposta e verificar as ligações
Masoud Bimar

Respostas:

250

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:

yurzui
fonte
2
Você pode explicar o que significa orçamento?
precisa saber sobre o Stack Overflow
3
@StackOverflow Adicionado
yurzui 16/01/19
2
Obrigado @yurzui pela sua resposta rápida, é novo recurso no angular 7? Não vimos esse erro na angular 5. Isso significa que estamos fazendo algo errado?
precisa saber sobre o Stack Overflow
2
@StackOverflow Foi adicionado em @angular/cli@7Veja também o que há de novo no ng7 aqui blog.angular.io/… With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
yurzui
23
como otimizar para diminuir o tamanho do orçamento usado? em vez de aumentá-lo ...
deadManN
76

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.

insira a descrição da imagem aqui

É 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

Masoud Bimar
fonte
Onde você coloca o código de 'compressão' que você forneceu no seu aplicativo angular?
F3L1X79 30/10/19
1
Se você usar qzip no projeto nodejs, consulte esta ligação , para o projeto angular você pode simplesmente ativá-lo no comando de compilação ver essa ligação
Masoud Bimar
2
Para executar o analisador sem instalar o pacote globalmente:npx webpack-bundle-analyzer ./dist/stats.json
michel404
4
No Angular 9, o comando é ng build --statsJson=true. Veja Angular 9 Doc
wami em