Module Federation: importaciones dinámicas en tiempo de ejecución

En una organización frontend con varios equipos, varias aplicaciones desplegadas de forma independiente suelen necesitar compartir componentes de interfaz y utilidades. Publicar el código en npm requiere aumentar la versión, realizar una nueva publicación y volver a desplegar por completo todas las aplicaciones consumidoras, lo que crea un acoplamiento estrecho entre los equipos y ciclos de iteración lentos.

El enfoque tradicional (publicar el código compartido como un paquete de npm) implica que actualizar un componente de botón compartido requiere: actualizar el paquete de npm, publicar una nueva versión, actualizar el package.json de cada aplicación consumidora, recompilar y volver a desplegar cada aplicación consumidora. Module Federation elimina todos estos pasos.

Module Federation permite que una aplicación (un "remote") exponga módulos de JavaScript que otra aplicación (un "host") carga y ejecuta en tiempo de ejecución, sin recompilar ni volver a desplegar el host. Cuando el usuario carga la aplicación host, esta obtiene dinámicamente los módulos del remote según los necesita.

Webpack 5 incorporó Module Federation como una funcionalidad integrada de primer nivel mediante ModuleFederationPlugin. Antes de Webpack 5, unos patrones similares requerían una configuración manual compleja o plugins de terceros. El plugin gestiona automáticamente toda la carga dinámica y la administración del ámbito compartido.

Un remote es una aplicación desplegada de forma independiente que expone uno o varios módulos (componentes de React, utilidades o páginas de funcionalidades completas) para que otras aplicaciones los consuman. El remote genera un manifiesto remoteEntry.js que describe lo que expone y cómo cargarlo.

Un host es una aplicación que consume módulos de uno o varios remotes. El host hace referencia a los remotes por nombre y URL en su configuración de Webpack. Cuando el código del host importa un módulo remoto, el runtime de Module Federation lo obtiene y lo ejecuta dinámicamente desde la URL del remote.

Los módulos compartidos son bibliotecas (como React y React DOM) que solo deberían cargarse una vez, aunque tanto el host como el remote las incluyan. Al marcar React como un singleton compartido, Module Federation garantiza que solo se ejecute una versión de React, algo fundamental porque los hooks de React fallan cuando hay varias instancias.

Al compilar un remote, Webpack genera un archivo remoteEntry.js con el nombre de archivo configurado. Este archivo es un manifiesto ligero y un script de arranque: declara qué módulos expone el remote, enumera las URL de sus chunks e inicializa el ámbito compartido. El host descarga primero este archivo para descubrir qué ofrece el remote.

Cuando el host encuentra un import de un módulo remoto, comprueba si el código del remote ya está cargado. Si no lo está, obtiene remoteEntry.js de la URL del remote, inicializa el ámbito compartido (negociando las versiones de las bibliotecas compartidas) y, a continuación, descarga y ejecuta el chunk específico que contiene el módulo solicitado.

Un equipo despliega una nueva versión de su remote (con el componente Button actualizado) sin modificar la aplicación host. El siguiente usuario que cargue el host obtiene automáticamente el nuevo Button porque el host siempre obtiene el archivo remoteEntry.js actual desde la URL del remote. No es necesario recompilar ni volver a desplegar el host, ni coordinarse con otros equipos.

Un patrón de microfrontends más antiguo utiliza iframes para aislar las secciones propiedad de cada equipo. Los iframes proporcionan un aislamiento sólido, pero dificultan enormemente compartir el estado, gestionar el enrutamiento de las URL y mantener estilos coherentes. Module Federation mantiene todo en el mismo contexto de JavaScript, lo que permite compartir el enrutamiento, el estado de autenticación y los estilos.

¿Cuál es la función de remoteEntry.js en Module Federation?

Module Federation resuelve el problema del despliegue independiente del código frontend compartido al permitir la carga de módulos en tiempo de ejecución. Los remotes exponen módulos mediante remoteEntry.js; los hosts los consumen dinámicamente sin recompilar. Los singletons compartidos (React, React DOM) evitan la carga duplicada de bibliotecas. Esta arquitectura permite un verdadero despliegue independiente: actualice un remote y todas las aplicaciones host verán el cambio de inmediato.