Estratégias de pré-carregamento de rotas no Angular

Pré-carregue rotas com antecedência para acelerar navegação.

Minko Gechev

A divisão de código no nível da rota pode ajudar a reduzir o tempo de carregamento inicial de um aplicativo, atrasando o JavaScript associado a rotas que não são inicialmente necessárias. Dessa forma, o roteador Angular aguarda até que um usuário navegue até uma determinada rota antes de acionar uma solicitação de rede para fazer o download do JavaScript associado.

Embora essa técnica seja ótima para o carregamento inicial da página, ela pode deixar a navegação mais lenta, dependendo das necessidades latência de rede e largura de banda. Uma maneira de resolver esse problema é pré-carregamento de rotas. Com o pré-carregamento, quando o usuário está em um determinado trajeto, é possível fazer o download e armazenar em cache o JavaScript associado às rotas que provavelmente serão necessárias a seguir. O roteador Angular oferece essa funcionalidade por padrão.

Nesta postagem, você vai aprender a acelerar a navegação ao usar a divisão de código no nível da rota aproveitando o pré-carregamento de JavaScript no Angular.

Estratégias de pré-carregamento de rotas no Angular

O roteador Angular fornece uma propriedade de configuração chamada preloadingStrategy, que define a lógica para o pré-carregamento e o processamento dos módulos Angular de carregamento lento. Vamos abordar duas estratégias possíveis:

  • PreloadAllModules, que pré-carrega todas as rotas de carregamento lento, como indica o nome.
  • QuicklinkStrategy, que pré-carrega apenas as rotas associadas a links na página atual.

O restante desta postagem se refere a um app de exemplo do Angular. O código-fonte está disponível no GitHub (link em inglês).

Como usar a estratégia PreloadAllModules

O app de exemplo tem várias rotas de carregamento lento. Para pré-carregar todos eles usando a estratégia PreloadAllModules, que é integrada ao Angular, especifique-a como o valor da propriedade preloadingStrategy na configuração do roteador:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

Agora exiba o aplicativo e observe o painel Network no Chrome DevTools:

  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  2. Clique na guia Rede.

Você verá que o roteador fez o download de nyan-nyan-module.js e about-about-module.js em segundo plano quando você abriu o aplicativo:

A estratégia PreloadAllModules em ação.

O roteador também registrou o declarações de rota para que, quando você navegar até um URL associado a qualquer um dos módulos pré-carregados, a transição seja instantânea.

PreloadAllModules é útil em muitos casos. No entanto, quando você tem dezenas de módulos, o pré-carregamento agressivo pode aumentar bastante o uso da rede. Além disso, como o roteador precisa registrar as rotas em todos os módulos pré-carregados, isso pode causar cálculos intensivos na linha de execução de interface e prejudicar a experiência do usuário.

A biblioteca quicklink oferece uma estratégia melhor para apps maiores. Ele usa a API IntersectionObserver para pré-carregar apenas módulos associados a links visíveis na página.

Você pode adicionar o Quicklink a um app Angular usando o pacote ngx-quicklink. Comece instalando o pacote pelo npm:

npm install --save ngx-quicklink

Quando ele estiver disponível no seu projeto, você poderá usar o QuicklinkStrategy especificando o preloadingStrategy do roteador e importando o QuicklinkModule:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

Agora, ao abrir o aplicativo novamente, você notará que o roteador pré-carrega apenas nyan-nyan-module.js, já que o botão no centro da página tem um link de roteador para ele. Ao abrir a navegação lateral, o roteador pré-carrega o botão "Sobre" rota:

Uma demonstração da estratégia de pré-carregamento de Quicklink.

O exemplo acima funcionará para um aplicativo básico, mas se ele tiver vários módulos de carregamento lento, será necessário importar o QuicklinkModule para um módulo compartilhado, exportá-lo e, em seguida, importar o módulo compartilhado para os módulos de carregamento lento.

Primeiro, importe o QuicklinkModule do ngx-quicklink para o módulo compartilhado e exporte-o:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

Em seguida, importe SharedModule para todos os módulos de carregamento lento:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks agora vai estar disponível nos seus módulos de carregamento lento.

Como ir além do pré-carregamento básico

Embora o pré-carregamento seletivo via link rápido possa acelerar significativamente a navegação, você pode tornar sua estratégia de pré-carregamento ainda mais eficiente de rede usando o pré-carregamento preditivo, que é implementado pelo Guess.js. Ao analisar um relatório do Google Analytics ou de outro provedor de análises, a Guess.js pode prever a jornada de navegação de um usuário e pré-carregar apenas os blocos de JavaScript que provavelmente serão necessários em seguida.

Você pode aprender a usar o Guess.js com o Angular nesta página do site da Guess.js.

Conclusão

Para acelerar a navegação ao usar a divisão de código no nível da rota:

  1. Escolha a estratégia de pré-carregamento certa de acordo com o tamanho do seu aplicativo:
    • Aplicativos com poucos módulos podem usar a estratégia PreloadAllModules integrada do Angular.
    • Aplicativos com muitos módulos precisam usar uma estratégia de pré-carregamento personalizada, como o link rápido do Angular ou o pré-carregamento preditivo, conforme implementado no Guess.js.
  2. Configure a estratégia de pré-carregamento definindo a propriedade preloadStrategy do roteador Angular.