Como o Lazy Loading pode melhorar o desempenho da minha aplicação Angular?

Como o Lazy Loading pode melhorar o desempenho da minha aplicação Angular?
Nayanne Batista
Nayanne Batista

Compartilhe

Já acessou um site que demorou um tempão pra carregar o conteúdo da página? Se sim, acredito que não tenha ficado feliz com isso. Como pessoas desenvolvedoras, queremos oferecer a melhor experiência possível aos usuários. Por isso, vou te mostrar como melhorar a performance da sua aplicação Angular utilizando o Lazy Loading.

O Angular, por padrão, carrega todos os arquivos de uma só vez no primeiro carregamento, comportamento denominado Eager Loading (“carregamento ansioso”). Dessa forma, assim que a aplicação é acessada, ele carrega todos os módulos projetados contidos no arquivo do módulo principal, ou seja, toda a aplicação, mesmo que alguns componentes não sejam requeridos imediatamente.

Assim, quanto maior a aplicação, mais tempo é necessário para fazer o download dos arquivos e a renderização na tela. Devido a isso, o primeiro acesso pode resultar em um tempo de resposta muito longo para as usuárias e usuários.

A espera no carregamento se torna ainda mais relevante quando pensamos no acesso por meio de aplicativos móveis (tablet, celular) e em conexões lentas. Então, como resolver esse problema? É aí que surge o lazy loading para nos auxiliar.

Neste artigo, eu vou te mostrar:

  • o que é o lazy loading no angular;
  • as vantagens de utilizar o lazy loading;
  • como implementar esta técnica na sua aplicação; e
  • como verificar o seu funcionamento.

Vamos lá?

O que é o lazy loading?

O lazy loading (“carregamento preguiçoso”) é uma técnica recomendada pelo guia de melhores práticas da documentação do Angular e é utilizada para melhorar o desempenho da sua aplicação, além de torná-la mais organizada e escalável. Trata-se de um padrão onde o carregamento de módulos ocorre sob demanda, ou seja, apenas quando solicitado e não necessariamente no primeiro acesso.

Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto

Por que usar o lazy loading?

Utilizar o lazy loading na sua aplicação apresenta algumas vantagens importantes, como:

  • carregamento inicial mais rápido;
  • estrutura modularizada mais organizada;
  • maior escalabilidade;
  • código mais limpo e, por consequência;
  • maior facilidade de manutenção.

Agora que já conhecemos as principais vantagens de utilizar o lazy loading, vamos aprender como podemos implementá-lo em nosso projeto?

Como implementar o lazy loading?

Ao invés de importar todos os seus módulos dentro do módulo principal (app.module.ts), iremos criar outros módulos e carregá-los sob demanda. Vamos criar um módulo chamado book, utilizando o seguinte comando do Angular CLI:

Criação de um módulo chamado book através do comando do Angular CLI: ng g module book  --routing e a descrição dos arquivos criados.

A opção “--routing” criará também o arquivo de rotas do módulo gerado. Da mesma forma, criaremos outro módulo, denominado users.

Criação de um módulo chamado users através do comando do Angular CLI: ng g module users  --routing e a descrição dos arquivos criados.

Se tiver dúvidas sobre estes comandos, você pode aprender mais sobre o Angular e como usar o Angular CLI para criar sua aplicação.

No módulo book, foram criados 4 componentes, que servirão como exemplos para configurarmos nossas rotas:

Criação dos componentes book-create, book-read, book-update e book-delete; dentro do módulo book, através do comando do Angular CLI: ng g c book/ mais o nome do componente.

E no módulo users, foi criado o componente Login:

Criação do componente login dentro do módulo users, através do comando do Angular CLI: ng g c users/login.

Configurando nossos arquivos de rotas

Agora, precisamos configurar as rotas da nossa aplicação.

  • No arquivo de rotas principal, o AppRoutingModule, teremos a seguinte configuração de rotas:
Configuração de rotas no arquivo `AppRoutingModule`.

Neste arquivo, para os dois módulos criados anteriormente, o lazy loading está sendo utilizado. Assim, quando acessamos as rotas /book ou /users, através da função loadChildren, a importação dinâmica do módulo em questão será feita, utilizando uma promise.

Função `loadChildren` e importação dinâmica do módulo `UsersModule`.

Para comparar, vejamos como é feita a configuração para carregar o HomeComponent, quando o path é vazio. Neste caso, o carregamento é “ansioso” (Eager Loading).

Configuração da rota para carregar o `HomeComponent` quando o `path` é vazio.

Agora, precisamos fazer a configuração nos arquivos de roteamento dos módulos que criamos, pois eles são responsáveis por definir suas próprias rotas.

  • No arquivo de rotas do módulo book, o BookRoutingModule, teremos a seguinte configuração de rotas:
Configuração de rotas no arquivo `BookRoutingModule`.

Os caminhos da nossa aplicação ficaram assim:

/book para carregar o BookReadComponent;

/book/create para carregar o BookCreateComponent;

/book/update para carregar o BookUpdateComponent;

/book/delete para carregar o BookDeleteComponent

  • No arquivo de rotas do módulo users, o UsersRoutingModule, teremos a seguinte configuração de rotas:
Configuração de rotas no arquivo `UsersRoutingModule`.

Aqui, ao acessarmos http://localhost:4200/users, será carregado o LoginComponent (a porta pode variar de acordo com suas configurações).

Devemos nos atentar ainda para o fato de que, no AppRoutingModule, utilizamos nas importações o RouterModule.forRoot(routes) para especificar que este é o módulo de roteamento raiz.

Decorator @NgModule com *imports* e *exports*, no arquivo `AppRoutingModule`.

Já, nos módulos filhos, o RouterModule.forChild(routes) é adicionado.

Decorator @NgModule com *imports* e *exports*, no módulo filho

O forRoot() deve ser usado apenas uma vez na aplicação, já o forChild() pode ser utilizado em vários módulos.

Sobre a implementação, é importante termos o cuidado de remover a importação dos módulos que estão carregando sob demanda, do arquivo app.module.ts, caso tenham sido importados anteriormente lá, senão continuarão a ser carregados de forma preliminar.

Arquivo `app.module.ts` com as importações dos módulos `BookModule` e `UsersModule` comentadas.

Verificando o funcionamento

Executando a aplicação, com o comando ng serve, podemos verificar que, antes da utilização do lazy loading, o Angular carregava tudo de uma só vez (Initial Chunk Files). Agora, a aplicação está dividida em vários chunks (‘pedaços’) e eles serão carregados apenas quando for necessário. Assim, o tamanho inicial do ‘bundle’ (pacote) carregado é menor e, consequentemente, o tempo de carregamento também.

Antes:

Bundle gerado com todos os arquivos antes da utilização do lazy loading, com o tamanho total de 3.08 MB.

Depois:

Bundle gerado após a utilização do lazy loading, divididos em *Initial Chunk Files* com o tamanho total de 3.03 MB e *Lazy Chunk Files*, contendo os módulos `BookModule` e `UsersModule`.

Conclusão

Neste artigo, nós entendemos a importância do lazy loading no Angular e aprendemos como implementar esta técnica para melhorar o desempenho da nossa aplicação.

Quer aprender mais sobre Front-end e Angular? Veja as nossas formações:

Aprenda mais sobre Promises:

Nayanne Batista
Nayanne Batista

Nayanne (Nay) é uma paraibana arretada que fez transição de carreira para a TI depois de concluir um doutorado na área da saúde e ser professora no ensino superior. Graduada em Análise e Desenvolvimento de Sistemas, já atuou como Dev Frontend em projetos e hoje é Instrutora na Alura. Acredita completamente no poder transformador da educação e da tecnologia na vida das pessoas. Ama livros e café! :)

Veja outros artigos sobre Front-end