4

Tenho um projeto grande com angular e preciso deixar os carregamento das paginas com uma boa performance, de principio configurei um WebPack Customizado para a aplicação. Mas ao aplica-lo os arquivos baixados continuam grande chegando a 14mb de upload.

Uma possibilidade encontrada é configurar um loadChildren nas rotas para carregar apenas os componentes daquela pagina, ou seja, carregar por demanda. Teria alguma forma de fazer isso fora das rotas?

Por enquanto o carregamento dos componentes estão sendo feio no arquivo app.module.ts,uma possibilidade sugerida era de implementar uma forma de declarar um @NgModule por componente como dependência ou criar um module.export para cada uma das paginas contendo suas dependências de carregamento individual.

2
  • na hora de buildar sua aplicação vc usou a flag prod? Commented 13/05/2020 às 20:42
  • Sim, utilizei mas minha duvida seria de como configurar corretamente o webpack ou o angular para fazer carregamento apenas dos componentes utilizados. Se é recomendado Criar um arquivo .module.js para cada interface em vez de app.module.ts. Até o momento só achei exemplos que utilizam um arquivo de importação ou pelas rotas Commented 13/05/2020 às 21:41

1 Resposta 1

1

Para organizar uma aplicação Angular, a forma adequada é uma boa estruturação dos seus módulos. Eles devem ser divididos em App, Core, Share e Features.

O App, Shared e Core deve ser os únicos a serem carregados no inicio da aplicação. Daí conforme o usuário navega, os módulos Features serão carregados pela Router.

Não dá pra fugir disso, carregar módulos sem ser pela rota, vai ser reinventar a roda, apesar de ser possível carregar um modulo na raça. Seria necessário enganar o ng builder para ele achar que trata-se da declaração de uma rota.

export const lazyModules = {
    feature: {
        loadChildren: () => import('../../feature/feature.module').then(m => m.FeatureModule)
    }
}
......

constructor(private injector: Injector, private compiler: Compiler) 

......

lazyModules.feature.loadChildren().then(async (m) => {
    const ng = m instanceof NgModuleFactory ? 
        m : await this.compiler.compileModuleAsync(moduleOrFactory)

    ng.create(this.injector)
});

ps: converti esse código de um efeito NgRx, então deve ser necessário alguns ajutes.

Enfim, esse certamente não é o caminho, vale a pena dar uma conferida nesse artigo do Tomas Trajan:

How to architect epic Angular app in less than 10 minutes! ⏱️😅.

Aí sim, você estará configurando sua aplicação de forma modularizada e voltada para performance.

Mas lembre-se performance em Angular não deve se limitar a Carga por Demanda, uma boa gestão de estado é fundamental, separando componentes entre Smart and Dummy.

Por fim, uma última dica, dá uma olhada nesse projeto de Schematics que estou desenvolvendo:

angular-mat-baum

Espero que goste!

Abraços,
Bernardo Baumblatt.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .