Optimiser le chargement de son application Angular

Lorsque l’on construit une application complexe on se retrouve très vite avec des dizaines de composants, de services, de librairies, … qui vont fortement impacter le temps de chargement des scripts de notre application, sans considérer le chargement des données elles-mêmes.

En effet, par défaut Angular charge tous les scripts de l’application à la première connexion. Une fois les scripts chargés il reste ensuite à l’explorateur internet à les interpréter et afficher le résultat. Selon la taille de l’application on peut très vite arriver à plusieurs secondes de chargement avant d’avoir le premier écran.

Il existe pourtant plusieurs techniques et stratégies pour optimiser ce temps de chargement et permettre à l’utilisateur d’interagir avec le site beaucoup plus vite.

Chargement à la demande ou lazy-loading

Lorsque l’on crée une application, il n’est pas optimal de charger toutes les données de celle-ci dès le début pour ensuite ne plus interagir avec le serveur. C’est le même principe pour le chargement de l’application elle-même : charger tous les scripts de l’application alors que potentiellement on ne veut accéder qu’à 10% des pages n’est pas la meilleure solution.

Par défaut, le comportement d’une application Angular est de charger tous les composants à la première connexion. Pour changer ce mécanisme et passer en mode « lazy-loading » c’est assez simple.

Il suffit de gérer chaque « feature » de l’application dans un nouveau module. Pour générer ce module le plus simple est d’utiliser le CLI ng generate module mon-module –routes mon-module –module app.module (je vous conseille fortement d’utiliser le CLI d’Angular le plus possible)

Tout au long de cet article, nous allons utiliser une démonstration pour illustrer les modifications de configuration.

Nous avons une application dans laquelle nous déclarons un module parent-un.module.ts . Pour activer le « lazy-loading » sur ce module voici comment procéder.

App-routing.module.ts

import {CustomPreloadingStrategy} from "./CustomPreloadingStrategy";
const routes: Routes = [
  {path: 'parentUn', loadChildren: () => import('./parent-un/parent-un.module').then(m => m.ParentUnModule)}
@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: CustomPreloadingStrategy})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

C’est la déclaration de la route qui va faire le nécessaire. Là où une page déclarée de façon classique se fait via le composant, la déclaration en « lazy-loading » se sert du module.

Le module parent-un prend lui la forme suivante :

parent-un-routing.module.ts

import {CustomPreloadingStrategy} from "./CustomPreloadingStrategy";
const routes: Routes = [
  {path: 'parentUn', loadChildren: () => import('./parent-un/parent-un.module').then(m => m.ParentUnModule)}
@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: CustomPreloadingStrategy})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

C’est la déclaration de la route qui va faire le nécessaire. Là où une page déclarée de façon classique se fait via le composant, la déclaration en « lazy-loading » se sert du module.

Le module parent-un prend lui la forme suivante :

parent-un-routing.module.ts

const routes: Routes = [{
  path: '', component: ParentUnComponent,
  children: [
    {path: 'enfantUn', loadChildren: () => import('./enfant-un/enfant-un.module').then(m => m.EnfantUnModule)},
    {path: 'enfantDeux', loadChildren: () => import('./enfant-deux/enfant-deux.module').then(m => m.EnfantDeuxModule)}
  ]
},
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ParentUnRoutingModule {
}

Dans notre module nous avons déclaré à nouveau deux sous-modules en « lazy-loading » enfant-un et enfant-deux.

Le composant ParentUnComponent est quant à lui définit à la racine de la route.

Nous verrons plus bas dans l’article le comportement du navigateur.

Être efficace en utilisant une stratégie de chargement

Nous avons vu comment charger les modules à la demande, mais attendre que l’utilisateur clique sur un lien pour charger le code de celui-ci n’est pas non plus la meilleure des stratégies car ce code peut lui aussi être conséquent.

Une manière de répondre à cette question est de définir une stratégie de chargement implémentant la classe PreloadingStrategie.

Pour notre exemple voici l’implémentation que nous avons :

customPreloadingStrategy.ts

@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, loadMe: () => Observable): Observable {
    if (route.data && route.data['preload']) {
      let delay:number=route.data['delay'];
      console.log('preload called on '+route.path+' delay is '+delay);
      return timer(delay).pipe(
        flatMap( _ => {
          console.log("Loading now "+ route.path);
          return loadMe() ;
        }));
    } else {
      console.log('no preload for the path '+ route.path);
      return of(null);
    }
  }
}

La stratégie mise en place est de déclencher le chargement du module au bout d’un laps de temps paramétrable. Mais on pourrait très bien imaginer d’autres stratégies, liées à l’UX de l’application pour faciliter l’enchaînement des pages ou bien de coupler tout cela aux droits d’accès de l’utilisateur pour ne charger uniquement les pages auxquelles il a droits.

Pour utiliser cette stratégie de chargement, il suffit de l’ajouter au chargement de la route de la façon suivante.

App-routing.module.ts

import {CustomPreloadingStrategy} from "./CustomPreloadingStrategy";

const routes: Routes = [
  {path: 'parentUn', loadChildren: () => import('./parent-un/parent-un.module').then(m => m.ParentUnModule)},
  {
    path: 'parentDeux',
    data: {preload: true, delay: 3000},
    loadChildren: () => import('./parent-deux/parent-deux.module').then(m => m.ParentDeuxModule)
  }];
@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: CustomPreloadingStrategy})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Ici on déclenche le chargement si preload est vrai et au bout du temps déclaré dans delay.

Voyons maintenant comment le navigateur se comporte via une video