Notions fondamentales de la fédération de modules

La fédération de modules permet à une application JavaScript de charger et d’exécuter, à l’exécution, du code provenant d’une autre application déployée indépendamment. Issue de Webpack 5, cette approche est désormais également possible grâce aux cartes d’importation natives et à l’importation dynamique.

Les grandes organisations scindent les monolithes en plusieurs « micro-interfaces » déployées indépendamment — un hôte principal et plusieurs applications de fonctionnalité. La fédération de modules permet à l’hôte de charger chaque fonctionnalité à la demande sans les regrouper lors de la construction.

Dans Webpack 5, l’hôte déclare les remotes (les autres applications à consommer) et les applications distantes déclarent les exposes (ce qu’elles proposent). L’environnement d’exécution récupère un petit manifeste auprès de chaque application distante au démarrage et télécharge les fragments à mesure que l’hôte les importe.

Sans Webpack, la même idée fonctionne avec des cartes d’importation pointant vers des ensembles ESM distants et avec l’importation dynamique pour le chargement. La carte d’importation de l’hôte indique "feature-cart": "https://cart-team.example.com/entry.js" ; import("feature-cart") charge la dernière version déployée.

Sans coordination, chaque application distante embarquerait sa propre copie de React. Les outils de fédération permettent de déclarer des dépendances partagées — la première application distante à charger React le rend disponible pour toutes les autres. Les approches natives utilisent des cartes d’importation pour faire pointer chaque application distante vers la même URL de React.

Chaque équipe est propriétaire de son application distante et la déploie quand elle le souhaite. L’hôte n’est jamais reconstruit ; il récupère les nouvelles versions au chargement suivant de la page (ou grâce à l’invalidation du cache). Cela découple entièrement les cycles de publication.

Épinglez les applications distantes à des URL versionnées (/v1/entry.js, /v2/entry.js) afin qu’une mise à niveau de l’hôte soit intentionnelle plutôt qu’implicite. Certaines équipes utilisent une mise en correspondance des versions sémantiques au niveau de la carte via des outils comme JSPM.

La fédération ajoute de la complexité à l’exécution : davantage de requêtes réseau, un débogage plus difficile entre origines et le risque de dépendances partagées incompatibles. Utilisez-la lorsque vous avez réellement besoin d’un déploiement indépendant ; pour les projets plus petits, une seule construction est plus simple et plus rapide.

Le plantage d’un module distant ne doit pas entraîner celui de l’hôte. Encapsulez les importations dynamiques dans des limites d’erreurs (React) ou dans un bloc try/catch (JavaScript natif), puis affichez une interface de repli lorsqu’un module distant échoue. L’application hôte reste fonctionnelle même si une fonctionnalité est temporairement indisponible.

Les exportations distantes ne fournissent aucune information de type à la compilation dans l’hôte. Générez des types TypeScript partagés dans un paquet distinct consommé par les deux parties, ou utilisez une validation à l’exécution (Zod, io-ts) à la frontière de la fédération.

La fédération native (cartes d’importation + ESM) est plus simple et fondée sur des standards, mais elle ne dispose pas de la coordination des dépendances partagées de Webpack. Choisissez Webpack/Module Federation pour les applications complexes ayant de nombreuses dépendances partagées ; choisissez la solution native pour des configurations de microinterfaces plus simples.

Le W3C explore des mécanismes plus riches de chargement des modules qui rendraient la fédération native plus performante, notamment grâce à une meilleure négociation des dépendances partagées. Aujourd’hui, considérez les cartes d’importation comme la fondation et ajoutez votre outillage de fédération par-dessus.

Quelle est la motivation principale de l’utilisation de Module Federation dans une grande application ?

Module Federation permet à un hôte de charger à l’exécution du code provenant de modules distants déployés indépendamment. L’outillage de Webpack 5 ajoute la négociation des dépendances partagées ; la fédération native utilise les cartes d’importation et l’importation dynamique. Utilisez cette solution pour les architectures de microinterfaces impliquant plusieurs équipes ; acceptez la complexité supplémentaire en échange de la liberté de déployer les éléments indépendamment.