Angular é um framework de frontend JavaScript desenvolvido pelo Google para construir aplicativos web escaláveis de nível empresarial. Alguns desses aplicativos podem ficar bastante grandes, afetando o tempo de carregamento do seu aplicativo.
Para reduzir o tempo de carregamento e melhorar a experiência geral dos seus usuários, você pode usar uma técnica conhecida como carregamento preguiçoso “lazy loading”. Essa funcionalidade nativa do Angular permite que você carregue apenas as partes necessárias do aplicativo web primeiro e, em seguida, carregue outros módulos conforme necessário.
Neste artigo, você aprenderá sobre o lazy loading e como ele pode ajudar a acelerar seu aplicativo web.
O que é Lazy Loading?
O lazy loading refere-se à técnica de carregar elementos de uma página da web somente quando eles são necessários. Seu oposto é o eager loading, quando tudo é carregado — ou tenta ser carregado — imediatamente. Carregar todas as imagens, vídeos, CSS e códigos JavaScript com eagerness pode significar tempos de carregamento longos — uma má notícia para os usuários.
O lazy loading é frequentemente usado para imagens e vídeos em sites que hospedam muito conteúdo. Em vez de carregar todo o conteúdo de mídia de uma vez, o que usaria muita largura de banda e deixaria a página mais lenta, esses elementos são carregados quando sua posição na página está prestes a ser visualizada durante a rolagem.
Angular é um framework de aplicativo de página única que depende do JavaScript para grande parte da sua funcionalidade. A coleção de JavaScript do seu aplicativo pode facilmente se tornar grande à medida que o aplicativo cresce, e isso vem com um aumento correspondente no uso de dados e tempo de carregamento. Para acelerar tudo, você pode usar o lazy loading para primeiro buscar os módulos necessários e adiar o carregamento de outros módulos até que eles sejam necessários.
Benefícios do Lazy Loading no Angular
O lazy loading oferece benefícios que tornarão o seu site mais fácil de usar. Estes incluem:
- Tempo de carregamento mais rápido: JavaScript contém instruções para exibir sua página e carregar seus dados. Por causa disso, é um recurso que bloqueia a renderização. Isso significa que o navegador precisa esperar para carregar todo o JavaScript antes de renderizar sua página. Ao usar o lazy loading em Angular, o JavaScript é dividido em partes que são carregados separadamente. A parte inicial contém apenas a lógica necessária para o módulo principal da página sendo carregado imediatamente. Em seguida, os demais módulos são carregados de forma preguiçosa (lazy loading). Reduzir o tamanho da parte inicial fará o site carregar e renderizar mais rapidamente.
- Menos uso de dados: Dividindo os dados em partes e carregando conforme necessário, você poderá usar menos largura de banda.
- Recursos conservados do navegador: Como o navegador carrega apenas as partes que são necessárias, ele não desperdiça memória e CPU tentando interpretar e renderizar código que não é necessário.
Implementando o Lazy Loading no Angular
Para seguir com este tutorial, você precisará:
- NodeJS instalado
- Conhecimentos básicos do Angular
Eleve o nível do seu projeto
Você usará o CLI Angular para criar seu projeto. Você pode instalar o CLI usando npm, executando o comando:
npm install -g @angular/cli
Depois disso, crie um projeto chamado Lazy Loading Demo como este:
ng new lazy-loading-demo --routing
Esse comando cria um novo projeto angular, completo com roteamento. Você estará trabalhando exclusivamente na pasta src/app, que contém o código para o seu aplicativo. Esta pasta contém o seu arquivo principal de roteamento, app-routing.module.ts. A estrutura da pasta deve ser parecida com esta:
Crie um módulo de recurso com scripts
A seguir, você criará um módulo de recursos que utilizará o lazy loading. Para criar este módulo, execute este comando:
ng generate module blog --route blog --module app.module
Este comando cria um módulo chamado BlogModule, com o roteamento. Se você abrir src/app/app-routing.module.ts, você verá agora que ele se parece com isso:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
A parte importante para o lazy loading é a terceira linha:
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
Essa linha define as rotas. A rota para o blog usa o argumento loadChildren ao invés de component. O argumento loadChildren diz ao Angular para carregar de forma preguiçosa (Lazy loading) a rota — para importar dinamicamente o módulo somente quando a rota é visitada, e, em seguida, devolvê-lo ao roteador. O módulo define suas próprias rotas filhas, como blog/**, em seu arquivo routing.module.ts. O módulo de blog que você gerou deve se parecer com isso:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from './blog.component';
const routes: Routes = [{ path: '', component: BlogComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BlogRoutingModule { }
Você notará que este arquivo de roteamento contém uma única rota, ''. Isso resolve para /blog e aponta para o BlogComponent. Você pode adicionar mais componentes e definir essas rotas neste arquivo.
Por exemplo, se você quisesse adicionar um componente que puxasse detalhes sobre um determinado artigo de blog, você poderia criar o componente com este comando:
ng generate component blog/detail
Isso gera o componente para o detalhe do blog e o adiciona ao módulo do blog. Para adicionar uma rota para ele, você pode simplesmente adicioná-lo à sua array de rotas:
const routes: Routes = [{ path: '', component: BlogComponent },
{path:"/:title",component: DetailComponent}];
Isso adiciona uma rota que resolve para blog/:title (por exemplo, blog/angular-tutorial). Esta array de rotas é lazy e não está incluída no plano inicial.
Verifique o carregamento preguiçoso (Lazy loading)
Você pode verificar facilmente se o lazy loading está funcionando, executando o comando ng serve e observando a saída. Na parte inferior da saída, você deve obter algo como isso:
ng serve.A saída acima é dividida em duas partes: Initial Chunk Files são os arquivos carregados quando a página é carregada pela primeira vez. Lazy Chunk Filessão lazy loading. O módulo do blog está listado neste exemplo.
Verificando o Lazy Loading através dos registros da rede do navegador:
Outra maneira de confirmar o lazy loading é usando a aba Network no painel de Ferramentas do Desenvolvedor do seu navegador. (No Windows, apenas pressione F12 para Chrome e Microsoft Edge, e Ctrl-Shift-I no Firefox. Em um Mac, pressione Command-Option-I para Chrome, Firefox e Safari)
Selecione o filtro JS para visualizar apenas arquivos JavaScript carregados através da rede. Após o carregamento inicial do aplicativo, você deve obter algo como isso:
Quando você navegar para /blog, você notará que uma nova parte, src_app_blog_blog_module_ts.js, está carregada. Isso significa que seu módulo foi solicitado somente quando você navegou para aquela rota, e ele está sendo carregado de forma preguiçosa (lazy loading). O registro da rede deve ser algo parecido com isso:
Lazy Loading vs Eager Loading
Para fins de comparação, criaremos um módulo carregado de forma eager e ver como isso impacta o tamanho do arquivo e o tempo de carregamento. Para demonstrar isso, você criará um módulo para autenticação. Um módulo desse tipo pode precisar ser carregado de forma eager, já que a autenticação é algo que todos os usuários precisam fazer.
Para gerar um AuthModule, execute o seguinte comando no terminal (CLI):
ng generate module auth --routing --module app.module
Isso irá gerar o módulo e um arquivo de roteamento. Ele também adiciona o módulo ao arquivo app.module.ts. Entretanto, ao contrário do comando que usamos para gerar um módulo da última vez, este não adiciona uma rota carregada de forma preguiçosa (Lazy loading). Ele usa o parâmetro --routing ao invés de --route <name>. Isso adiciona o módulo de autenticação ao array imports em app.module.ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule //added auth module
],
providers: [],
bootstrap: [AppComponent]
}) Adicionar o AuthModule ao array de imports do AppModule significa que o módulo de autenticação será adicionado aos arquivos do chunk inicial e será incluído no plano JavaScript principal. Para verificar isso, você pode executar o comando ng serve novamente e observar a saída:
ng serve da Angular após o módulo de autenticação é adicionada.Como você pode ver, o módulo de autenticação não está incluso como parte dos arquivos de lazy partes. Além disso, o tamanho do plano inicial aumentou. O arquivo main.js quase dobrou de tamanho, aumentando de 8 KB para 15 KB. Neste exemplo, o aumento é pequeno, já que os componentes não contêm muito código. No entanto, à medida que você preenche os componentes com lógica, o tamanho deste arquivo aumentará, reforçando a necessidade do lazy loading.
Resumo
Você aprendeu como usar o carregamento preguiçoso (lazy loading) no Angular para buscar módulos somente quando eles são necessários. O carregamento preguiçoso é uma ótima técnica para melhorar os tempos de carregamento, reduzir o uso de dados e utilizar melhor seus recursos frontend e backend.
O lazy loading, juntamente com tecnologias como redes de distribuição de conteúdo e minificação de JavaScript, melhorará tanto o desempenho do seu site quanto a satisfação dos usuários.
Se você está desenvolvendo um site WordPress e quer aumentar a velocidade, leia sobre o Kinsta Edge Caching para ver alguns números impressionantes.
A digital product manager by day, Michael is a tech enthusiast who is always tinkering with different technologies. His interests include web and mobile frameworks, NoCode development, and blockchain development.
Deixe um comentário