Cómo crear micro-frontends modulares con Vite y Module Federation

Por qué dividir tu panel web en partes más pequeñas

Imagina que tu empresa ha crecido, el equipo de ingeniería se ha duplicado y todos intentan modificar exactamente el mismo código fuente del sistema principal al mismo tiempo. En la práctica, esto significa conflictos constantes en Git, compilaciones lentas que tardan veinte minutos y despliegues arriesgados donde un error en el módulo de pagos derriba todo el panel de clientes. Dividir la interfaz en piezas más pequeñas e independientes resuelve este problema de escala humana y técnica.

Este enfoque descentralizado, conocido como arquitectura de micro-frontends, permite que diferentes equipos desarrollen, prueben y desplieguen partes aisladas del sitio o sistema sin depender de un único repositorio gigante. Es como una urbanización cerrada donde cada casa tiene su propia rutina, pero todas comparten la misma calle principal. Si un equipo quiere actualizar el panel financiero usando la versión más reciente de una biblioteca de gráficos, puede hacerlo sin bloquear el trabajo del equipo de registro de usuarios.

Sin embargo, separar todo en proyectos distintos trae un desafío clásico: cómo hacer que estas piezas conversen en la pantalla del usuario sin duplicar código pesado o hacer que la carga de la página sea insoportablemente lenta. Aquí es donde entran las herramientas de empaquetado moderno, un tema central que también exploramos en estrategias avanzadas sobre cómo renderizar listas largas en React manteniendo 60 FPS para garantizar fluidez visual.

Cómo funciona Module Federation en la práctica

Durante mucho tiempo, integrar códigos de diferentes repositorios en el navegador significaba usar iframes torpes o generar paquetes estáticos que requerían reinstalarse con cada pequeño cambio. Module Federation cambia esta regla del juego al permitir que una aplicación actúe tanto como anfitriona (el contenedor principal) como proveedora (remota) que entrega piezas de código bajo demanda.

En términos simples, piénsalo como un sistema de entregas donde la aplicación principal no guarda todos los muebles en el stock; simplemente encarga el sofá o la mesa cuando el usuario abre la habitación correspondiente. En la práctica, el navegador descarga el código del módulo remoto solo cuando el usuario navega a esa sección específica, ahorrando ancho de banda de internet y acelerando la apertura inicial de la página.

Este intercambio dinámico ocurre gracias a los módulos nativos del ecosistema JavaScript moderno, que saben negociar dependencias en tiempo de ejecución. Así, si el módulo principal y el módulo remoto usan exactamente la misma versión de React, el navegador descarga la biblioteca una sola vez, evitando el desperdicio de memoria RAM en el ordenador de quien accede al sistema.

Configurando Vite para compartir código entre proyectos

Vite se ha convertido en el favorito de los desarrolladores debido a su velocidad de desarrollo vertiginosa, basándose en módulos ES nativos del navegador en lugar de empaquetar todo antes de iniciar. Para unir esta velocidad con Module Federation, utilizamos plugins específicos como @originjs/vite-plugin-federation, que traduce los conceptos de compartición al ecosistema rápido de Vite.

Para ponernos manos a la obra, el primer paso consiste en configurar la aplicación que proveerá el código (el microservicio remoto) exponiendo sus funcionalidades a través del archivo de configuración del empaquetador. Ve abajo cómo estructurar el archivo vite.config.js en el proyecto remoto:

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Widget': './src/components/Widget.jsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

Este bloque de código le avisa a Vite que el componente ubicado en src/components/Widget.jsx debe empaquetarse de forma aislada y ponerse a disposición bajo el nombre ./Widget para cualquier aplicación externa que lo solicite. La propiedad shared garantiza que React y React-dom se traten como dependencias singleton, es decir, cargadas una sola vez en la memoria global de la página.

Consumiendo el módulo remoto en la aplicación principal

Con el componente remoto publicado y accesible vía red, el paso siguiente es configurar la aplicación anfitriona para consumir esta pieza de código como si estuviera en la misma carpeta local. En la práctica, esto transforma componentes externos en piezas nativas de tu árbol de elementos visuales.

Abajo hay un ejemplo de configuración en el proyecto principal (host) para importar el componente remoto expuesto en el paso anterior:

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'hostApp',
      remotes: {
        remoteApp: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
  },
});

Con este puente establecido en el archivo de configuración, basta con importar el componente dentro del código JavaScript o JSX de la aplicación principal utilizando una llamada asíncrona o límites de error adecuados para manejar posibles caídas de red:

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

const RemoteWidget = lazy(() => import('remoteApp/Widget'));

resport default function App() {
  return (
    <div>
      <h1>Panel Principal<h1>
      <Suspense fallback={<p>Cargando widget...<p>}>
        <RemoteWidget />
      <Suspense>
    <div>
  );
}

El uso del componente lazy combinado con Suspense es fundamental porque el navegador necesita unos milisegundos para descargar el archivo remoteEntry.js a través de la red. Mientras ocurre la descarga, la interfaz muestra un mensaje de carga amigable en lugar de congelar la pantalla.

Gestionando dependencias y evitando conflictos de versiones

Compartir dependencias entre diferentes equipos suena simple en teoría, pero exige disciplina rigurosa para evitar el pesadilla conocido como conflicto de versiones. En la práctica, si el equipo A actualiza React a la versión más reciente y el equipo B sigue usando una versión antigua, el navegador puede negarse a ejecutar el código o causar comportamientos extraños en la interfaz.

Para mitigar este riesgo, establece políticas claras de versionado semántico y exige el bloqueo estricto de versiones en el archivo package.json de todos los micro-frontends. Además, cuando el ecosistema requiere bases de datos o contratos complejos tras bambalinas, vale la pena aplicar patrones consistentes, en paralelo al cuidado que discutimos en cómo desacoplar bases de datos en microservicios heredados.

Otra buena práctica operacional consiste en monitorear el rendimiento y la latencia de carga de los archivos remotos utilizando herramientas de observabilidad y métricas de infraestructura, asegurando que la caída de un servidor periférico no inutilice todo el sistema principal. Para profundizar en estos conceptos arquitectónicos en producción, consulte también nuestro análisis técnico sobre ¿Base de datos lenta? Cómo acelerar consultas con índices parciales.

Consideraciones finales sobre arquitecturas descentralizadas

Adoptar micro-frontends con Module Federation y Vite no es una solución mágica que resuelve problemas de organización cultural de la noche a la mañana; es una herramienta de ingeniería potente para empresas que ya enfrentan cuellos de botella reales de escala en monolitos front-end. La autonomía operacional gana impulso, permitiendo que diferentes equipos entreguen valor de forma independiente y continua.

En resumen, el éxito de esta arquitectura depende tanto de la elección correcta de las herramientas como del rigor en los contratos de integración y en la gobernanza de las dependencias compartidas. Planifica bien la división de los dominios de negocio antes de escribir la primera línea de código, mantén la comunicación entre los equipos activa y aprovecha la agilidad que la modularidad moderna aporta a tu producto web.