Charger à la demande une fonctionnalité secondaire

Une carte interactive peut être utile pour préparer une randonnée, mais elle n’est pas nécessaire à la lecture initiale de sa fiche. Si son code est envoyé et exécuté avec celui de la page, chaque visiteur en paie le coût, même s’il ne consulte jamais la carte. Vous allez différer ce module jusqu’à une action explicite, puis vérifier son effet dans le réseau et sur le budget client.

Dans les leçons précédentes, l’affichage de la fiche est resté côté serveur et le composant client de suivi a été isolé. Vous conservez ces décisions : la carte constitue une fonctionnalité secondaire distincte, chargée uniquement quand le visiteur la demande. Le découpage en bundles sépare alors le code nécessaire à cette fonctionnalité du JavaScript livré pour l’affichage initial.

Choisir un déclencheur explicite

Un import dynamique s’écrit avec import() et retourne une promesse. Au lieu de référencer le module de carte au sommet du fichier client, vous placez cet import dans une fonction appelée après un clic. Le navigateur peut ainsi télécharger le module séparément, au moment où l’action le rend nécessaire. Le code ci-dessous décrit le principe ; il ne constitue pas un remplacement du composant de suivi existant ni un nouveau fichier du projet.

async function chargerCarte() {
  const moduleCarte = await import("./module-carte");
  moduleCarte.afficherCarte();
}

Le chemin ./module-carte est volontairement un repère conceptuel, pas un chemin à copier dans le catalogue : le contrat de ce projet ne prévoit aucun module de carte. N’ajoutez donc pas ce fichier ou une classe CSS sous couvert de cet exemple. Dans une application où un module de carte existe déjà et où son emplacement est autorisé, adaptez l’import à ce module et à son API ; gardez le déclenchement dans la fonction appelée par l’interaction.

Gérer l’attente et les erreurs

Un chargement différé implique une attente possible après le clic. Prévoyez un état en cours, puis un état d’erreur si le téléchargement échoue ; ne retirez pas le contenu principal pendant cette opération. Le message d’attente doit correspondre à une action réelle et rester accessible, par exemple en annonçant le chargement dans une région de statut. Dans ce projet, réutilisez uniquement les éléments et classes déjà autorisés si vous mettez en œuvre cette interface.

Ne confondez pas import dynamique et simple masquage visuel. Si le module est importé statiquement en haut d’un fichier client, cacher ensuite son interface ne garantit pas que son code soit absent du chargement initial. Vérifiez la requête réelle : après un chargement à froid de la fiche, le module secondaire ne doit pas apparaître avant l’action ; après le clic, une requête de bundle correspondante doit apparaître et la fonctionnalité doit s’ouvrir.

Mesurer sans dégrader l’existant

Comparez un build de production avant et après le découpage, sur la même route et dans des conditions identiques à celles consignées dans votre rapport de référence. Relevez les ressources JavaScript transférées avant interaction, leur taille, puis celles chargées après l’ouverture de la carte. Vérifiez également le scénario avec cache froid : le cache du navigateur peut masquer le téléchargement réel lors d’une seconde visite.

Un bundle séparé ne signifie pas automatiquement une amélioration : si le visiteur ouvre toujours la carte, le coût est seulement déplacé dans le temps. Vérifiez que le chargement initial respecte le budget client déjà établi et que la fonctionnalité reste utilisable après son chargement. Une baisse de score Lighthouse ou une régression observée par rapport à la référence doit être investiguée, pas acceptée au motif que le code est désormais différé.

À retenir

• Déclenchez import() depuis l’action qui rend la fonctionnalité secondaire nécessaire.
• Prévoyez un état d’attente et une gestion d’échec sans bloquer le contenu principal.
• Vérifiez dans le réseau que le module n’est demandé qu’après l’interaction.
• Mesurez le build de production et comparez le JavaScript initial au budget et à la référence Lighthouse.
• Respectez le contrat des fichiers : aucun module de carte n’y est prévu, le chemin d’exemple n’est pas à copier tel quel.

La prochaine leçon assemble les contrôles de qualité pour vérifier les routes et les budgets avant la mise en ligne.