React Micro-Frontends mit Vite + Module Federation und unabhängigen CI/CD-Pipelines

Mit zunehmender Teamgröße stoßen monolithische Frontend-Anwendungen an ihre Grenzen. Micro-Frontends lösen diese Herausforderung durch Entkopplung einzelner Domänenmodule.

Unter Vite ermöglicht Module Federation (@originjs/plugin-module-federation) schnelles HMR, ESM-native Builds und dynamisches Modul-Sharing zur Laufzeit.

Wichtige Punkte

• Laufzeit-Entkopplung: Remote-Module werden zur Laufzeit geladen. Remotes können unabhängig gebuildet und deployed werden, ohne die Host-Shell neu zu kompilieren.
• Shared Singletons: Bibliotheken wie react und react-dom werden als Singleton geteilt, um doppelte Downloads zu vermeiden.
• Fehler-Isolierung: ErrorBoundary schützt die Host-Anwendung vor Ausfällen einzelner Remote-Module.

1. Remote-Konfiguration (vite.config.ts)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/plugin-module-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'paymentApp',
      filename: 'remoteEntry.js',
      exposes: {
        './CheckoutForm': './src/components/CheckoutForm.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});