Build e atualização de assets do angular 5 é muito lento

Oii Leonardo, eu sei de uma ferramenta que você pode analizar cada módulo e dependência dentro do pacote gerado pela CLI, e o quanto cada uma está demorando para carregar, o tamanho de cada uma pesa etc.

Se chama webpack-bundle-analyzer

Como usar ela?

Faça um build da sua aplicação passando o parâmetro --stats-json, assim:

ng build --prod --stats-json

Isso vai gerar um build com um arquivo stats.json.

Este arquivo terá uma analise de toda performance do seu site, gerada pelo próprio webpack. Para visualizar os dados deste arquivo que utilizaremos o webpack-bundle-analyzer

1:

Instale ela em seu projeto:

npm install --save-dev webpack-bundle-analyzer

2:

No package.json, na parte de scripts adicione esse:

"bundle-report": "webpack-bundle-analyzer dist/stats.json"

Vai ficar assim:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  }

Detalhe, só verifique se o seu arquivo realmente está na pasta dist/stats.json, pois pode ser que esteja em mais um nível de pasta, como dist/meuprojeto/stats.json.

3:

Depois de adicionar rode o comando no terminal na pasta do projeto:

npm run bundle-report

Com isto, você poderá acessar da url http://localhost:8888 uma visualização da saúde do seu projeto parecida com essa:

Com isto você pode tomar as devidas providencias para melhorar seu pacote. E uma dica também é entender como funciona o lazyload no Angular. Os recursos que você já pode usar agora é a compilação ahead of time, build-optmizer: ng build --prod --aot --build-optmizer:

package.json

"scripts": {
  "ng": "ng",
  "build":  "ng build --prod --aot --build-optimizer -op ../webapps/app"
}

E também a compactação com Brotli. Veja este blog post: Compactação máxima com Brotli

São todas técnica para pesquisar e aplicar! :)

Referências:

• Analyzing bundle size with the Angular CLI and Webpack
• 10 Angular Tips: Modules, VSCode and best practices
• Angular Extreme Performance

espero ter ajudado, bons estudos!

Leonardo, ontem foi lançada a versão 7 do Angular, e fizeram melhorias na performance da aplicação retirando uma funcionalidade desnecessária. Recomendo você atualizar sua aplicação para a nova versão :)