Les PWA Ionic peuvent être ultra rapides… si on évite ces pièges.

1️⃣ Un bundle JavaScript trop lourd

Symptômes : premier écran lent, TTI élevé.

✅ Correctifs (Angular 19)

• Lazy routes (standalone) : loadComponent() / loadChildren()
• Deferrable views : chargez le lourd au scroll/viewport avec @defer
• Imports dynamiques pour les libs lourdes (charts, éditeurs, maps)
• Budgets + build prod (Vite) activés

// app.routes.ts
export const routes = [
  { path: '', loadComponent: () => import('./home/home.page').then(m => m.HomePage) },
  { path: 'details/:id', loadChildren: () => import('./details/routes').then(m => m.DETAILS_ROUTES) }
];

<!-- Vue différée -->
@defer (on viewport) {
  <app-heavy-chart />
} @placeholder {
  <ion-skeleton-text animated />
}

2️⃣ Cache / Service Worker mal réglés

Symptômes : app qui ne se met pas à jour, données obsolètes.

✅ Correctifs (Angular Service Worker)

• ng add @angular/pwa puis configurez ngsw-config.json
• assets en prefetch (shell) / lazy (gros médias)
• API en network-first (fraîcheur) avec limites (taille/durée)
• Affichez un prompt de mise à jour via SwUpdate

// ngsw-config.json (extrait)
{
  "assetGroups": [
    { "name": "app", "installMode": "prefetch",
      "resources": { "files": ["/*.css","/*.js","/index.html"] } },
    { "name": "assets", "installMode": "lazy",
      "resources": { "files": ["/assets/**"] } }
  ],
  "dataGroups": [
    { "name": "api", "urls": ["https://api.exemple.com/**"],
      "cacheConfig": { "strategy": "freshness", "maxSize": 100,
                       "maxAge": "1d", "timeout": "10s" } }
  ]
}

3️⃣ Change detection qui mouline

Symptômes : scroll saccadé, listes lentes.

✅ Correctifs (Angular 19)

• Passez les composants clés en ChangeDetectionStrategy.OnPush
• Utilisez Signals (toSignal, computed) pour l’UI réactive
• Listes : @for (...; track item.id) (ou *ngFor trackBy)
• Très grandes listes : CDK Virtual Scroll

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-list',
  standalone: true,
  template: `
    <ul>
      @for (item of items(); track item.id) {
        <li>{{ item.label }}</li>
      }
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent {
  readonly items = toSignal(this.svc.items$);
  constructor(private readonly svc: ItemsService) {}
}

💡 Une PWA rapide, c’est plus d’engagement, de conversions et même un meilleur SEO.

👉 Vous avez une app à créer, améliorer ou sauver ? Contactez-moi directement ici sur LinkedIn.