Você escolhe quais pacotes angulares serão pré-carregados

John Papa Segue 29 de maio · 4 min ler

Os usuários querem aplicativos rápidos. Colocar seus pacotes JavaScript em seu navegador o mais rápido possível e antes que o usuário precise deles pode ter um impacto enorme e positivo na experiência do usuário. Saber como você pode melhorar essa experiência é importante.

Uma forma de melhorar a experiência do usuário com seus aplicativos angulares é decidir estrategicamente quais pacotes serão pré-carregados. Você controla quando os pacotes são carregados e quais pacotes são carregados. É por isso que você deve explorar a possibilidade de escolher um modelo embutido ou criar sua própria estratégia personalizada de pré-carregamento Angular.

Nesta série, exploraremos algumas das suas opções para pré-carregar bundles angulares.

Aqui estão os outros artigos desta série:

Optando em

A estratégia de "opt in" é como um buffet. Você escolhe o que deseja pré-carregar e deixa o restante para ser carregado conforme necessário.

Criar estratégias de pré-carregamento personalizadas é uma ótima maneira de controlar a maneira como os pacotes pré-carregam. A estratégia personalizada de pré-carregamento OptInPreloadStrategy permite que você indique quais pacotes carregados preguiçosos devem ser pré-carregados.

Você pode fazer isso criando uma nova classe que implemente essa interface PreloadingStrategy e fornecendo-a na raiz. Em seguida, você deve implementar a função de preloadpreload e retornar a função load() quando quiser informar ao Angular para pré-carregar a função.

Observe que a função de preloadpreload na classe OptInPreloadStrategy verifica a definição de rota para uma propriedade de data que contém uma propriedade de preloadpreload . Se essa propriedade data.preload existir e for um valor geral, a função load() será retornada. Quando a função load() é retornada, o roteador escuta este Observable e fará a chamada de rede para carregar o bundle da rota.

 import {Injectable} de ' @ angular / core '; 
import {PreloadingStrategy, Route} de ' @ angular / roteador ';
import {Observable, EMPTY} de 'rxjs';
@Injectable ({providedIn: 'root'})
classe de exportação OptInPreloadStrategy implementa PreloadingStrategy {
preload (route: Route, load: () => Observável <any>): Observável <any> {
return route.data && route.data ['preload']? load (): EMPTY;
}
}

Definições de rota

Essa estratégia requer que você indique quais rotas devem ser pré-carregadas. Você pode fazer isso adicionando a propriedade data.preload e definindo-a como true em sua definição de rota, conforme mostrado abaixo.

 exportar rotas const: rotas = [ 
{path: '', pathMatch: 'full', redirectTo: 'heroes'},
{
caminho: 'dashboard',
loadChildren: () =>
import ('app / dashboard / dashboard.module'). então (m => m.DashboardModule),
data: {preload: true}
}
{
caminho: 'heróis',
loadChildren: () =>
import ('app / heroes / heroes.module'). então (m => m.HeroesModule),
data: {preload: true}
}
{
caminho: 'vilões',
loadChildren: () =>
import ('app / villains / villains.module'). então (m => m.VillainsModule)
}
{path: '**', pathMatch: 'full', componente: PageNotFoundComponent}
];

Observe que o painel e os heróis fazem o preload.data ambos, com a propriedade preload.data definida como true . No entanto, a rota dos vilões não tem esse conjunto de propriedades. Nesse cenário, os heróis e o painel seriam pré-carregados, mas os vilões só seriam carregados quando o usuário navegasse para essa rota.

Definindo a estratégia personalizada OptInPreload

Então, quando a criação de seu RouterModule , passar as opções do roteador, incluindo a preloadingStrategy ao forRoot() função.

 @NgModule ({ 
importações: [
RouterModule.forRoot (routes, {preloadingStrategy: OptInPreloadStrategy})
]
exportações: [RouterModule]
})
classe de exportação AppRoutingModule {}

Tente

Depois de aplicar essa estratégia e definir algumas das rotas de definição de rota, data.preload = true , reconstrua e execute seu aplicativo com ng serve . Abra seu navegador, abra suas ferramentas de desenvolvedor e vá para http://localhost:4200 . Quando você inspecionar a guia Rede no seu navegador, todos os seus pacotes já serão pré-carregados.

Observe que o painel e os heróis já estão pré-carregados, mas os vilões não estão. Se você quiser realmente ver isso fazer a diferença, ative a otimização em suas ferramentas de desenvolvedor para uma conexão mais lenta, como 3G, e atualize a página. O pré-carregamento será muito mais visível agora na guia Rede.

Decidindo o que é certo para o seu aplicativo

Agora que você sabe como criar sua própria estratégia de pré-carregamento, como OptInPreloadStrategy , como você avalia se essa é a estratégia correta para seu aplicativo?

Pode fazer sentido considerar quais pacotes ajudam a melhorar a experiência de seus usuários sendo pré-carregados primeiro. Você pode conversar com seus usuários de negócios (os interessados no seu aplicativo) e descobrir quais são as áreas mais freqüentadas do seu aplicativo. Você pode usar análises de aplicativos existentes ou realizar estudos de usuários para determinar isso também.

No final, a decisão depende de você. Eu recomendo antes de escolher essas opções, ou qualquer estratégia de pré-carregamento, que você teste em várias velocidades de rede sob vários fluxos de trabalho de usuário válidos e comuns. Esses dados ajudarão você a decidir se essa é a estratégia certa para você ou se outra pode ser mais benéfica para os usuários do seu aplicativo.

Recursos

Originalmente publicado em johnpapa.net em 29 de maio de 2019.