Microfrontends: Module Federation
Use Webpack Module Federation o Vite Federation para dividir un frontend grande en remotos implementados de forma independiente que consuma una aplicación shell.
Microfrontends: Module Federation es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los microfrontends?
Dividir un frontend grande en piezas desarrolladas y desplegadas de forma independiente, normalmente una por equipo o dominio empresarial. Cada pieza puede tener su propio framework, repositorio, canalización de despliegue e incluso stack tecnológico. Una aplicación shell las integra en tiempo de ejecución.
¿Por qué usar microfrontends?
Las organizaciones con más de 10 equipos de frontend alcanzan ciertos límites: cuello de botella de un repositorio único, tiempos de compilación largos y calendarios de lanzamiento incompatibles. Los microfrontends permiten que los equipos publiquen de forma independiente, a cambio de una mayor complejidad arquitectónica.
Module Federation: la técnica principal
Webpack Module Federation (Webpack 5, también disponible en Vite mediante un plugin) permite que una aplicación shell importe código de remotos desplegados de forma independiente durante el tiempo de ejecución. El remoto expone módulos específicos y la shell los consume.
Configuración del remoto
La aplicación remota expone sus módulos mediante la configuración de webpack.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};Configuración de la shell (host)
La shell declara qué remotos importa.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Importar módulos remotos
Use una importación dinámica; webpack la resuelve mediante el runtime de federation.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Federation en Vite
Vite admite Module Federation mediante el plugin @originjs/vite-plugin-federation, con una API similar.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};Dependencias compartidas
Incluya bibliotecas como React en shared para evitar empaquetarlas dos veces. El runtime de federation resuelve la versión compatible más alta durante el tiempo de ejecución.
Despliegue independiente
Cada remoto tiene su propia canalización de compilación y despliegue. La shell apunta a una URL; al publicar un remoto nuevo, se implementa automáticamente para todos los consumidores.
Comunicación entre aplicaciones
No comparta el estado mediante importaciones directas: use eventos (CustomEvent), un bus compartido pequeño o postMessage. Mantenga los límites bien definidos para conservar la independencia.
Alternativas: iframes y Web Components
iframes: el aislamiento más sólido, pero con una navegación y un uso de CSS incómodos. Web Components: compatibilidad nativa del navegador, sin quedar atado a un framework, pero con un estado compartido limitado. Module Federation equilibra el aislamiento y la experiencia de desarrollo.
Compromisos
Ventajas: despliegues independientes, libertad tecnológica y autonomía de los equipos. Costes: configuración de compilación compleja, conflictos entre dependencias compartidas, errores en tiempo de ejecución difíciles de depurar y mayor complejidad del bundle. Solo compensa en organizaciones realmente grandes.
Cuándo evitarlo
Proyectos de un solo equipo, MVP y sitios con menos de 100 empleados en frontend. El coste de la complejidad es real: la mayoría de los equipos debería usar un monorepo.
Comprobación rápida
¿Qué permite Webpack Module Federation en una arquitectura de microfrontends?
Repaso: microfrontends
Divida el frontend por equipo o dominio para realizar despliegues independientes. Module Federation (webpack 5 / complemento de Vite): el shell importa elementos de los remotes en tiempo de ejecución. El remote expone módulos; el shell declara los remotes; ambos comparten dependencias como react. Use eventos para la comunicación entre aplicaciones. Es complejo: resérvelo para organizaciones realmente grandes.
Preguntas frecuentes
¿La lección «Microfrontends: Module Federation» es gratis?
Sí — el texto completo de «Microfrontends: Module Federation» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Microfrontends: Module Federation»?
Use Webpack Module Federation o Vite Federation para dividir un frontend grande en remotos implementados de forma independiente que consuma una aplicación shell. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Microfrontends: Module Federation»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Atomic Design: átomos, moléculas y organismos
- Configuración de un monorepo con Turborepo
- Microfrontends: Module Federation
- Estructura de carpetas basada en funcionalidades