3
respostas

Perfomance code splitting

Ao fazer o code splitting no Angular criamos diversos modules.ts.

E cada um desses módulos terá ao menos o NgModule e o CommonModule além de muitos poderem importar também o FormsModule, o ReactiveFormsModule, além das diretivas e sharedModules.

De um lado ganhamos bastante na perfomance por conseguir fazer o lazy loading. Mas minha dúvida é se isso pode gerar outro problema de perfomance e aumento de requisições já que duplicamos várias importações no nosso código. Ou o Angular dá um jeito de resolver isso por baixo dos panos na hora de compilar ? Ou isso acaba tendo um impacto muito baixo ?

3 respostas

Fala ai Enzo, tudo bem? O Angular já vai lidar com essas questões, ele vai criar um arquivo que contém os módulos comuns (caso esteja configurado, acredito que esta) e outros módulos apenas com códigos exclusivos do módulo.

Dessa forma, quando a gente importar o novo módulo, estamos importando apenas regras de negócio daquele contexto e não reimportando partes do Angular novamente.

Espero ter ajudado.

Opa Matheus, tudo em ordem! Obrigado pelos helps de sempre..

Minha dúvida é justamente essa. No módulo principal terão diversos módulos que fazem a aplicação rodar. Então dentre várias importações que estão no appModule terá, por exemplo: o BrowserModule, o HttpClient, o FormsModule, o ReactiveFormsModule, o AppRouting, as libs, os components e as diretivas.

Ai vamos supor que temos mais 5 outros módulos na aplicação que cuidam de partes específicas. E ai fazemos o lazy loading pra deixar a aplicação mais performática.

O ponto é que em cada um desses outros módulos nós teremos que importar novamente o Forms, o CommonModule, as diretivas e as vezes até libs que já foram importadas no appModule o Angular não identifica e temos que importar novamente.

Então nesses 5 módulos teremos o CommonModule sendo importado, o FormsModule e/ou ReactiveForms (supondo que eles utilizem formulários) e todas diretivas.

Cada vez que o usuário navegue por essas páginas que utilizam do lazy loading (e portando tendo seus módulos específicos), terão importações que já foram efetuadas antes, aumentando o número de requisições e tendo que baixar coisas duplicadas.

Minha dúvida é se o Angular por exemplo tem essa capacidade de olhar o que já foi baixado antes por outros módulos e não fazer com que o usuário baixe novamente aquilo que já foi importado antes, mesmo estando declarado em vários módulos ? Ou esses módulos como o Common e o Forms acabam tendo muito pouco impacto e portanto tanto faz se precisar baixar uma ou dez vezes?

Fala Enzo, conforme eu mencionei na resposta anterior, essa configuração e separação é feita em tempo de build.

O Webpack sabe que deve juntar X partes do código em um arquivo, pois, serão partes comum.

E as demais partes ele separa em mais outros N arquivos.

Dessa forma ao carregar a aplicação você baixa o bundle com os códigos comuns + o primeiro lazy loading, depois ele só vai baixar mais códigos exclusivos de cada contexto.

Agora falando apenas sobre o Angular eu não lembro se isso já vem configurado por padrão, precisaria fazer um teste e dar uma olhada nos resultados / configuração do Webpack.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software