Construcción de Micro-Frontends en React con Vite + Module Federation y despliegue independiente

Las aplicaciones monolíticas de frontend sufren problemas de tiempos de compilación prolongados y conflictos de código a medida que los equipos crecen. La arquitectura de Micro-Frontends resuelve esto dividiendo la aplicación en módulos independientes.

Utilizando Vite y Module Federation (@originjs/plugin-module-federation), es posible lograr compilaciones rápidas basadas en ESM y compartición de módulos en tiempo de ejecución.

Puntos clave

• Module Federation: Carga los módulos remotos en tiempo de ejecución, permitiendo desplegar cada micro-app de forma independiente sin recompilar el Host Shell.
• Singletons compartidos: Las dependencias clave como react y react-dom se comparten para evitar descargas duplicadas.
• Aislamiento de fallos: Los ErrorBoundary de React garantizan que los errores en un módulo remoto no afecten al resto de la aplicación.

1. Configuración de Remote (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'],
    }),
  ],
});