Monitore o tamanho dos pacotes ao longo do tempo para garantir que o aplicativo permaneça rápido.
A otimização de um aplicativo Angular é importante, mas como garantir que o desempenho dele não regresse ao longo do tempo? Introdução e monitoramento de métricas de desempenho em cada mudança de código.
Uma métrica importante é o tamanho do JavaScript fornecido com seu aplicativo. Ao introduzir um orçamento de desempenho que você monitora em cada solicitação de build ou envio, é possível garantir que suas otimizações continuem ao longo do tempo.
Calcule seu orçamento de performance
Use esta calculadora de orçamento on-line para estimar quanto JavaScript seu app pode carregar, dependendo do tempo para interação da página que você quiser.
Configurar um orçamento de desempenho na CLI do Angular
Quando você tiver um orçamento desejado para JavaScript, poderá aplicá-lo usando a interface de linha de comando (CLI) do Angular. Para ver como isso funciona, confira este app de exemplo no GitHub (link em inglês).
Você verá que o seguinte orçamento foi configurado em angular.json:
"budgets": [{
"type": "bundle",
"name": "main",
"maximumWarning": "170kb",
"maximumError": "250kb"
}]
Veja um resumo do que está sendo especificado:
- Há um orçamento para um pacote JavaScript chamado
main. - Se o pacote
mainfor maior que 170 KB, a CLI do Angular vai mostrar um aviso no console quando você criar o app. - Se o pacote
mainfor maior que 250 KB, o build falhará.
Agora, tente criar o app executando ng build --prod.
Você verá este erro no console:
Para corrigir o erro de build, consulte app.component.ts, que inclui uma importação de rxjs/internal/operators. Esta é uma importação particular que não pode ser usada por consumidores de rxjs. Isso aumenta muito o tamanho do pacote! Quando você atualizar para a importação correta, rxjs/operators e executar o build novamente, vai perceber que ele foi aprovado na verificação de orçamento.
Como o carregamento diferencial é ativado por padrão na CLI do Angular, o comando ng build produz dois builds do app:
- Um build para navegadores com suporte ao ECMAScript 2015. Essa versão inclui menos polyfills e sintaxe JavaScript mais moderna. Essa sintaxe é mais expressiva, o que leva a pacotes menores.
- Um build para navegadores mais antigos sem compatibilidade com o ECMAScript 2015. A sintaxe mais antiga é menos expressiva e requer mais polyfills, o que leva a pacotes maiores.
O arquivo index.html do app de exemplo se refere aos dois builds. Assim, os navegadores mais recentes podem usar o build menor do ECMAScript 2015 e os navegadores mais antigos podem usar o ECMAScript 5.
Aplique seu orçamento como parte da integração contínua
A integração contínua (CI) oferece uma maneira conveniente de monitorar o orçamento do seu app ao longo do tempo. E, felizmente, a maneira mais rápida de configurar isso é criar seu app com a CLI do Angular, sem precisar de outras etapas. Sempre que o pacote do JavaScript exceder o orçamento, o processo será encerrado com o código 1, e o build falhará.
Se preferir, também é possível aplicar um orçamento de performance usando o bundlesize e o Lighthouse. A principal diferença entre os orçamentos de desempenho na CLI do Angular e no Lighthouse é quando as verificações são realizadas. A CLI do Angular realiza as verificações no tempo de build, analisando os recursos de produção e verificando os tamanhos deles. No entanto, o Lighthouse abre a versão implantada do aplicativo e mede o tamanho do recurso. Ambas as abordagens têm seus prós e contras. A verificação que a CLI Angular realiza é menos robusta, mas muito mais rápida, porque é uma pesquisa de um único disco. Por outro lado, o LightWallet do Lighthouse pode realizar uma verificação muito precisa considerando recursos carregados dinamicamente, mas precisa implantar e abrir o app sempre que for executado.
O Bundlesize é bastante semelhante à verificação de orçamento da CLI do Angular. A principal diferença é que o bundlesize pode mostrar os resultados da verificação diretamente na interface do usuário do GitHub.
Conclusão
Estabeleça orçamentos de desempenho com a CLI do Angular para garantir que o desempenho do app não diminua ao longo do tempo:
- Defina um valor de referência para o tamanho do recurso usando uma calculadora de orçamento ou seguindo as práticas da sua organização.
- Configurar orçamentos de tamanho em
angular.jsonabaixo deprojects.[PROJECT-NAME].architect.build.configurations.production.budgets - Os orçamentos serão aplicados automaticamente em cada build com a CLI do Angular.
- Considere introduzir o monitoramento de orçamento como parte da integração contínua, que também pode ser alcançado com a CLI do Angular.