Fédération de modules : imports dynamiques à l’exécution

Dans une organisation frontend composée de plusieurs équipes, plusieurs applications déployées indépendamment doivent souvent partager des composants d’interface et des utilitaires. Une publication sur npm nécessite d’incrémenter la version, de publier une nouvelle version et de redéployer entièrement chaque application utilisatrice, ce qui crée un couplage étroit entre les équipes et ralentit les cycles d’itération.

L’approche traditionnelle, qui consiste à publier le code partagé sous forme de paquet npm, signifie que la mise à jour d’un composant de bouton partagé nécessite les étapes suivantes : mettre à jour le paquet npm, publier une nouvelle version, mettre à jour le package.json de chaque application utilisatrice, puis reconstruire et redéployer chaque application utilisatrice. Module Federation supprime toutes ces étapes.

Module Federation permet à une application (une application « distante ») de mettre à disposition des modules JavaScript qu’une autre application (l’application « hôte ») charge et exécute à l’exécution, sans reconstruire ni redéployer l’application hôte. Lorsque l’utilisateur charge l’application hôte, celle-ci récupère dynamiquement les modules de l’application distante à la demande.

Webpack 5 a introduit Module Federation comme fonctionnalité intégrée de premier niveau via ModuleFederationPlugin. Avant Webpack 5, des approches similaires nécessitaient une configuration manuelle complexe ou des modules d’extension tiers. Le module d’extension gère automatiquement tout le chargement dynamique et la gestion de la portée partagée.

Une application distante est une application déployée indépendamment qui met à disposition un ou plusieurs modules — composants React, utilitaires ou pages fonctionnelles entières — que d’autres applications peuvent utiliser. L’application distante construit un manifeste remoteEntry.js qui décrit ce qu’elle expose et comment le charger.

Une application hôte utilise des modules provenant d’une ou plusieurs applications distantes. Elle référence les applications distantes par leur nom et leur adresse dans sa configuration Webpack. Lorsque le code de l’application hôte importe un module distant, l’environnement d’exécution de Module Federation de Webpack le récupère et l’exécute dynamiquement depuis l’adresse de l’application distante.

Les modules partagés sont des bibliothèques, comme React et React DOM, qui ne doivent être chargées qu’une seule fois, même si l’application hôte et l’application distante les incluent toutes les deux. En indiquant que React est un singleton partagé, Module Federation garantit qu’une seule version de React s’exécute, ce qui est essentiel, car les fonctions useState, useContext et useEffect de React cessent de fonctionner avec plusieurs instances.

Lorsque vous construisez une application distante, Webpack génère un fichier remoteEntry.js à l’emplacement défini par le nom de fichier configuré. Ce fichier est un manifeste léger et un script d’amorçage : il déclare les modules exposés par l’application distante, répertorie les adresses de leurs fragments et initialise la portée partagée. L’application hôte télécharge d’abord ce fichier pour découvrir ce que l’application distante propose.

Lorsque l’application hôte rencontre une importation provenant d’un module distant, elle vérifie si le code de l’application distante est déjà chargé. Si ce n’est pas le cas, elle récupère remoteEntry.js depuis l’adresse de l’application distante, initialise la portée partagée (en négociant les versions des bibliothèques partagées), puis télécharge et exécute le fragment précis contenant le module demandé.

Une équipe déploie une nouvelle version de son application distante (avec un composant de bouton mis à jour) sans toucher à l’application hôte. Le prochain utilisateur qui charge l’application hôte obtient automatiquement le nouveau bouton, car l’application hôte récupère toujours le fichier remoteEntry.js actuel à l’adresse de l’application distante. Aucune reconstruction de l’application hôte, aucun redéploiement de celle-ci et aucune coordination ne sont nécessaires.

Un ancien modèle de microinterfaces utilise des cadres intégrés pour isoler les sections gérées par les équipes. Les cadres intégrés offrent une isolation forte, mais rendent extrêmement difficiles le partage de l’état, le routage des adresses et la cohérence des styles. Module Federation conserve tout dans le même contexte JavaScript, ce qui permet de partager le routage et l’état d’authentification tout en conservant des styles cohérents.

Quel est le rôle de remoteEntry.js dans Module Federation ?

Module Federation résout le problème du déploiement indépendant du code frontend partagé en permettant le chargement des modules à l’exécution. Les applications distantes exposent des modules via remoteEntry.js, et les applications hôtes les utilisent dynamiquement sans être reconstruites. Les singletons partagés (React, React DOM) empêchent le chargement en double des bibliothèques. Cette architecture permet un véritable déploiement indépendant : mettez à jour une application distante et toutes les applications hôtes voient immédiatement la modification.