Artigo original: Lazy Loading in Angular – A Beginner's Guide to NgModules
O que é lazy loading?
O lazy loading (algo como "carregamento lento", em português) é o processo de carregamento de componentes, módulos ou outros ativos de um site, conforme necessário.
Como o Angular cria uma SPA (Aplicação de Página Única), todos os seus componentes são carregados de uma só vez. Isso significa que muitas bibliotecas ou módulos desnecessários também podem ser carregados.
Para uma aplicação pequena, não há problema. Porém, à medida que a aplicação cresce, o tempo de carregamento aumentará se tudo for carregado de uma vez. O lazy loading permite que o Angular carregue componentes e módulos como e quando eles forem necessários.
Em primeiro lugar, para entender como o lazy loading funciona no Angular, precisamos entender os blocos de construção básicos da estrutura: os NgModules.
O que são os NgModules?
Bibliotecas do Angular, como RouterModule, BrowserModule e FormsModule são conhecidas como NgModules. Material Angular, que é uma ferramenta de terceiros, também é um tipo de NgModule.
Os NgModules consistem em arquivos e códigos relacionados a um domínio específico ou que têm um conjunto semelhante de funcionalidades.
Um arquivo NgModule típico declara componentes, instruções, pipes e serviços. Ele também pode importar outros módulos que são necessários no módulo atual.
Uma das vantagens importantes dos NgModules é que eles podem ser carregados lentamente. Vamos dar uma olhada em como podemos configurar o carregamento lento.
Você pode verificar abaixo para ver como é um arquivo NgModule básico.
Como criar NgModules
Neste tutorial, criaremos dois módulos, Módulo A e Módulo B, que serão carregados lentamente. Na tela principal, teremos dois botões para carregar cada módulo de maneira lenta.
Crie o projeto
Crie um projeto do Angular chamado lazy-load-demo executando o comando abaixo:
ng new lazy-load-demo --routing --style css
code lazy-load-demo
Aqui, estamos criando um novo projeto com roteamento. Além disso, mencionamos o formato da folha de estilo para CSS. O segundo comando abre seu projeto no VS Code.
Módulo Root
Por padrão, um módulo raiz ou módulo de aplicação é criado em /src/app. Abaixo está o arquivo NgModule que é criado.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Primeiro, importamos todos os módulos e componentes necessários.
Depois disso, o decorador @NgModule declara que a classe AppModule é um tipo de NgModule. O decorador aceita declarações, importações, provedores e bootstrap. Aqui estão as descrições de cada um deles:
- declarações: os componentes deste módulo.
- importações: os módulos que são exigidos pelo módulo atual.
- provedores: os provedores de serviços, se houver.
- bootstrap: o componente root que o Angular cria e insere na página da Web do host
index.html.
Tela principal
A tela principal terá dois botões: Load Module A e Load Module B. Como o nome sugere (Carregar o módulo A e Carregar o módulo B, respectivamente), clicar nesses botões carregará lentamente cada módulo.
Para isso, substitua seu arquivo app.component.html pelo conteúdo abaixo.
<button style="padding: 20px; color: white; background-color: green;" routerLink="a">Load Module A</button>
<button style="padding: 20px; color: white; background-color: blue;" routerLink="b">Load Module B</button>
<router-outlet></router-outlet>
Vamos definir os módulos para as rotas a e b.
Módulos de carregamento lento
Para criar módulos carregados de modo lento, execute os comandos abaixo:
ng generate module modulea --route a --module app.module
ng generate module moduleb --route b --module app.module
Os comandos gerarão duas pastas, chamadas modulea e moduleb. Cada pasta conterá seus próprios arquivos module.ts, routing.ts e component.
Se você verificar seu app-routing.module.ts, verá o código abaixo para as rotas:
const routes: Routes = [
{ path: 'a', loadChildren: () => import('./modulea/modulea.module').then(m => m.ModuleaModule) },
{ path: 'b', loadChildren: () => import('./moduleb/moduleb.module').then(m => m.ModulebModule) }
];
Isso implica que, quando a rota a ou b é visitada, carrega seus respectivos módulos de maneira lenta.
Ao executar o projeto com ng serve, você verá a tela abaixo:
Ao clicar no botão Load Module A, você será direcionado para a página a. Esta é a aparência da sua tela:
Você deverá ver uma tela semelhante que diz moduleb works! quando clicar em Load Module B.
Como verificar se o lazy loading funcionou
Para verificar se os arquivos foram carregados, abra as ferramentas de desenvolvedor pressionando F12. Depois disso, visite a aba Network, como pode ser visto na captura de tela abaixo. Quando você atualizar a página, ela mostrará alguns arquivos que foram solicitados.
Vá em frente e limpe sua lista de solicitações pressionando o botão Clear (Limpar), conforme mostrado na imagem abaixo.
Ao clicar em Load Module A, você verá uma solicitação para modulea-modulea-module.js, como na captura de tela abaixo. Isso verifica se o Módulo A foi carregado de maneira lenta.
Do mesmo modo, quando você clica em Load Module B, o arquivo moduleb-moduleb-module.js é carregado. Isso verifica se o Módulo B foi carregado de maneira lenta.
Agora, quando você tentar clicar nos botões, ele não carregará esses arquivos js novamente.
Casos de uso para os NgModules
Como vimos, é muito fácil criar módulos de lazy loading. Há muitos casos de uso em que eles são úteis, como:
- Criação de um módulo separado para telas de pré-login e pós-login.
- Em um site e-commerce, as telas voltadas para o fornecedor e as telas voltadas para o cliente podem pertencer a módulos separados. Você também pode criar um módulo separado para pagamento.
- Geralmente, é criado um CommonModule separado, que contém componentes, instruções ou pipelines compartilhados. Instruções como o botão Copy Code e componentes como upvote/downvote geralmente são incluídos em um módulo comum.
Conclusão
Para sites menores, talvez não seja muito importante que todos os módulos sejam carregados de uma só vez. Porém, à medida que o site cresce, é útil ter módulos separados, que são carregados conforme necessário.
Devido ao lazy loading, o tempo de carregamento dos sites pode ser reduzido drasticamente. Isso é especialmente útil quando se está tentando obter uma classificação mais elevada para SEO. Mesmo que não seja o caso, tempos de carregamento mais curtos significam uma melhor experiência do usuário.
Você tem interesse em mais tutoriais? Dê uma olhada nestes recursos (em inglês):