Module Federation

Module Federation est une architecture révolutionnaire introduite dans Webpack 5 qui permet à plusieurs applications JavaScript de partager du code, des composants et des dépendances de manière dynamique au runtime. Contrairement aux approches traditionnelles de micro-frontends, Module Federation élimine le besoin de recompiler l'application hôte lorsqu'un module distant change, offrant une véritable indépendance entre les équipes de développement.

Fondements

• Charge dynamiquement des modules depuis des applications distantes via HTTP
• Partage automatique des dépendances communes pour éviter la duplication
• Permet l'intégration bidirectionnelle : une app peut être hôte et remote simultanément
• Fonctionne au niveau du bundler, invisible pour le code applicatif

Avantages

• Déploiement indépendant : chaque micro-frontend peut être déployé sans impacter les autres
• Réduction drastique de la taille des bundles grâce au partage de dépendances
• Scalabilité organisationnelle : équipes autonomes avec leurs propres cycles de release
• Amélioration des performances : chargement à la demande des fonctionnalités
• Flexibilité technologique : chaque module peut utiliser des versions différentes de frameworks

Exemple concret

Prenons une architecture e-commerce où l'application principale (shell) charge dynamiquement le module de panier depuis une application distante :

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        cart: 'cart@http://localhost:3001/remoteEntry.js',
        checkout: 'checkout@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'cart',
      filename: 'remoteEntry.js',
      exposes: {
        './CartWidget': './src/components/CartWidget',
        './CartPage': './src/pages/CartPage'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

import React, { lazy, Suspense } from 'react';

// Chargement dynamique du module distant
const CartWidget = lazy(() => import('cart/CartWidget'));
const CheckoutFlow = lazy(() => import('checkout/CheckoutFlow'));

export default function App() {
  return (
    <div>
      <header>
        <h1>Mon E-commerce</h1>
        <Suspense fallback={<div>Chargement...</div>}>
          <CartWidget />
        </Suspense>
      </header>
      <main>
        <Suspense fallback={<div>Chargement du checkout...</div>}>
          <CheckoutFlow />
        </Suspense>
      </main>
    </div>
  );
}

Mise en œuvre

1. Configurer ModuleFederationPlugin dans webpack.config.js de chaque application
2. Définir les modules à exposer (exposes) dans les applications remotes
3. Déclarer les remotes dans l'application hôte avec leurs URLs
4. Configurer le partage de dépendances avec stratégie singleton pour les libs UI
5. Implémenter la gestion d'erreurs pour les chargements de modules distants échoués
6. Mettre en place un système de versioning pour gérer la compatibilité entre modules
7. Déployer chaque application sur des domaines/ports différents
8. Configurer CORS si nécessaire pour permettre le chargement cross-origin

Outils associés

• Webpack 5+ : bundler natif supportant Module Federation
• Rspack : bundler Rust ultra-rapide compatible Module Federation
• Nx : monorepo tooling avec support intégré pour les architectures federées
• Module Federation Dashboard : visualisation des dépendances entre modules
• Vite avec @originjs/vite-plugin-federation : alternative pour Vite
• Single-SPA : framework de micro-frontends complémentaire

Module Federation transforme radicalement l'architecture des applications front-end à grande échelle en permettant une véritable autonomie des équipes tout en maintenant une expérience utilisateur cohérente. Pour les organisations ayant plusieurs équipes front-end, cette technologie réduit significativement le time-to-market et les coûts de coordination, tout en améliorant la maintenabilité à long terme. L'investissement initial dans la configuration est rapidement compensé par la flexibilité organisationnelle et technique qu'elle apporte.