Federación de módulos en Webpack 5

Rate this content
Bookmark

¿Microfrontends como monolito? ¿Biblioteca de componentes compartidos o guía de estilos? Esta técnica permite consumir módulos de compilaciones separadas, que pueden ser desarrolladas e implementadas de forma independiente. Una introducción y más ideas.

FAQ

La Federación de Módulos es una característica de Webpack 5 que permite construir y desplegar aplicaciones de manera que diferentes equipos puedan desarrollar y compilar sus partes por separado. Estas partes se publican como contenedores y pueden ser consumidas por otras aplicaciones o contenedores, funcionando como módulos remotos en un entorno de host.

Los principales beneficios incluyen la mejora del rendimiento de compilación, ya que cada parte se desarrolla y compila de forma independiente; la optimización web, mediante la carga bajo demanda de código; y la eficiencia en el manejo de dependencias compartidas, permitiendo la reutilización de módulos y bibliotecas comunes entre diferentes equipos o partes de una aplicación.

En la Federación de Módulos, un contenedor puede exponer módulos que son consumidos por el host como módulos remotos. Esta relación permite que el host solicite y cargue módulos de manera asíncrona, optimizando así la carga y reduciendo la redundancia al descargar solo los módulos realmente utilizados.

Utilizar módulos nativos de ECMAScript sin Webpack presenta desafíos como la renuncia a optimizaciones de compilación, alto número de solicitudes HTTP al cargar cada módulo por separado, y una compresión menos efectiva de archivos más pequeños, lo que puede degradar el rendimiento web.

Existen principalmente dos estrategias: la estrategia 'evergreen', donde cada aplicación utiliza siempre la última versión de un contenedor de forma automática, y la estrategia 'managed', donde se registran las versiones de los contenedores utilizados y se actualizan activamente tras validar su compatibilidad.

Actualmente, Webpack permite utilizar módulos de ECMAScript como externos y está trabajando para permitir producir contenedores en este formato, aunque existen desafíos técnicos y limitaciones, especialmente cuando se combinan con CSS o otros módulos complejos.

Para crear un contenedor, debes usar la propiedad 'exposes' del plugin de Federación de Módulos para exponer módulos específicos, asignando un nombre público y un nombre local para cada módulo, lo cual permite que otros contenedores o aplicaciones consuman estos módulos.

Tobias Koppers
Tobias Koppers
32 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute la federación de módulos en Webpack 5 como una solución escalable para dependencias compartidas en aplicaciones grandes. La federación de módulos permite compilaciones separadas para diferentes partes de una aplicación, reduciendo el tiempo de compilación y el retraso en la implementación. Incluye módulos expuestos y compartidos, carga asíncrona y creación de contenedores. La federación de módulos admite técnicas de orquestación de contenedores y tiene como objetivo integrarse con los módulos de ECMAScript. Sin embargo, la optimización y el intercambio en la federación de módulos pueden afectar el tamaño del código, y se requiere una evaluación cuidadosa. La actualización de los contenedores se puede gestionar mediante pruebas activas para garantizar la estabilidad.

Available in English: Module Federation in Webpack 5

1. Introducción a la Federación de Módulos en Webpack 5

Short description:

Voy a hablar sobre la federación de módulos en Webpack cinco. La motivación es tener una aplicación de gran o mediana escala y trabajar con múltiples equipos en múltiples rutas de aplicación. Veamos las opciones existentes con Webpack. Hay una opción de hacer una compilación única y construir todas las aplicaciones y partes juntas.

Entonces, empecemos. He trabajado para el equipo principal de Webpack y voy a hablar sobre la federación de módulos en Webpack cinco. Mi charla trata sobre la federación de módulos en Webpack cinco. Quiero contarte sobre la motivación de esta característica, cómo funciona y cómo usarla.

La motivación es tener una aplicación de gran a mediana escala y trabajar con múltiples equipos en múltiples rutas de aplicación. Has separado tu aplicación o aplicaciones en múltiples partes, como micro front-ends, pero también partes lógicas. Estas partes serían desarrolladas de forma independiente por diferentes equipos. Otro requisito es que tienes varias partes compartiendo bibliotecas comunes o compartiendo en otras rutas. Aquí tienes un ejemplo. Podrías tener un componente de encabezado y un componente de sitio como micro front-end en las páginas. O también podrías tener una biblioteca de componentes de guía de estilo, que es compartida por todas las aplicaciones. Pero también cosas diferentes a los front-ends, como lógica de obtención de datos, lógica de negocio o componentes lógicos.

Veamos las opciones existentes con Webpack. Podrías simplemente usar los módulos nativos de ECMAScript. Esto significa que no tienes ningún proceso de compilación para vincular las partes entre sí. Podrías consumir nativamente todos tus módulos en las aplicaciones y usar las declaraciones de importación nativas del navegador para vincularlos. Pero hay algunos desafíos con este enfoque. Básicamente, renuncias a todas las optimizaciones que Webpack haría por ti, como eliminación de exploradores no utilizados, concatenación de módulos y otras optimizaciones. También hay algunos desafíos en cuanto al rendimiento web. Tendrías cada módulo por separado, lo que provoca un alto número de solicitudes al mismo tiempo. Cada solicitud tiene un costo adicional y obtienes una compresión menos efectiva con más solicitudes y archivos más pequeños. Por supuesto, los archivos más grandes suelen comprimirse mejor que los archivos más pequeños. Y tienes todas estas desventajas de solo poder usar módulos de ECMAScript y no poder usar módulos de CommonJS, módulos de CSS, ESM u otras cosas procesadas en Webpack.

Hay una opción de hacer una compilación única y construir todas tus aplicaciones y partes juntas. De esta manera, cada módulo de cada otra parte o aplicación es accesible durante el proceso de compilación. Puedes usarlos simplemente a través de declaraciones de importación. Pero también hay algunos cambios con ese enfoque. Cada actualización requiere una compilación completa de todas las aplicaciones y partes.

2. Desafíos y Federación de Módulos

Short description:

Entonces, tiene un tiempo de compilación alto y esto significa un alto retraso en la implementación desde la actualización hasta la implementación de la nueva versión de la aplicación. Pero hay un complemento en Webpack que te permite separar una parte de tu proceso de compilación en una compilación separada, que se puede construir de forma independiente. Una alternativa a esto son los externos y las bibliotecas integradas. En resumen, los módulos nativos de ECMAScript son problemáticos debido al rendimiento web problemático. Un proceso de compilación único es problemático en cuanto al rendimiento de compilación. Y el enfoque de DLL y externos funcionaría, pero requiere mucho trabajo manual para extraer bibliotecas compartidas, etc. Por lo tanto, al final, necesitamos una solución escalable, o al menos un compromiso que tenga un buen rendimiento de compilación, un buen rendimiento web, pero también una buena solución para las dependencias compartidas. Es por eso que entramos en la Federación de Módulos.

Entonces, tiene un tiempo de compilación alto y esto significa un alto retraso en la implementación de la nueva versión de la aplicación. Y también tienes este problema, que no puedes compilar cada aplicación por separado. Por lo tanto, tus aplicaciones no se mantienen separadas entre sí porque si quieres compartir partes comunes o bibliotecas comunes en algún momento tienes que compilarlas juntas. Es como un desafío al que tienes que enfrentarte.

Pero hay un complemento en Webpack que te permite separar una parte de tu proceso de compilación en una compilación separada, que se puede construir de forma independiente. En este escenario, construirías cada parte como una DLL con un llamado complemento DLL. Y estas DLL se pueden consumir al mismo tiempo por el consumidor que consume la compilación. Pero también tienes una dependencia de tiempo de compilación del manifiesto generado por la DLL. Así que eso también es un desafío y tienes que reconstruir tu aplicación cuando una parte ha cambiado o los consumidores tienen que ser reconstruidos. Es un retraso adicional en la implementación. No es tan alto en comparación con el enfoque de compilación única, pero sigue siendo un retraso adicional que no quieres tener. Y también hay un gran desafío en cuanto a compartir bibliotecas o módulos comunes. Básicamente, si varias partes comparten una biblioteca, tienes que extraer o extraer esta biblioteca compartida en una DLL separada y un proceso separado manualmente, y luego consumir la DLL generada por el proceso separado en todas las partes que comparten esta biblioteca. Hay mucho trabajo manual involucrado para poder compartir bibliotecas entre partes.

Una alternativa a esto son los externos y las bibliotecas integradas. Entonces, en este escenario, cada parte se construiría como una biblioteca y luego sería consumida por las partes consumidoras de las aplicaciones como externos. Esto elimina esta dependencia de tiempo de compilación entre partes y partes consumidoras, y otros módulos podrían ser simplemente consumidos desde la biblioteca en tiempo de ejecución. Pero aún así, el desafío de compartir bibliotecas sigue siendo cierto para este escenario. Cada biblioteca compartida debe ser extraída en un proceso separado, una biblioteca separada, y luego ser externa en cada una de estas partes consumidoras o aplicaciones consumidoras.

En resumen, los módulos nativos de ECMAScript son problemáticos debido al rendimiento web problemático. Un proceso de compilación único es problemático en cuanto al rendimiento de compilación. Y el enfoque de DLL y externos funcionaría, pero requiere mucho trabajo manual para extraer bibliotecas compartidas, etc. Por lo tanto, al final, necesitamos una solución escalable, o al menos un compromiso que tenga un buen rendimiento de compilación, un buen rendimiento web, pero también una buena solución para las dependencias compartidas. Es por eso que entramos en la Federación de Módulos. En la Federación de Módulos, construirías cada parte por separado. Y aquí construiríamos un llamado contenedor, y cada parte se publicaría o implementaría como contenedor. Y cualquier aplicación u otros contenedores podrían consumir módulos de este contenedor. En esta relación, el consumidor es el anfitrión y el contenedor sería el remoto. Y si el anfitrión consume módulos expuestos del contenedor, entonces se llamarían módulos remotos. Así que volvemos de nuevo a la separación, cada parte se construye por separado, de forma independiente y se implementa de forma independiente, por lo que tenemos este buen rendimiento de compilación.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend.
Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.

Workshops on related topic

Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior
Construye una Potente Rejilla de Datos con AG Grid
React Summit 2024React Summit 2024
168 min
Construye una Potente Rejilla de Datos con AG Grid
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Node Congress 2023Node Congress 2023
49 min
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Workshop
Michele Riva
Michele Riva
En este masterclass, veremos cómo adoptar Orama, un potente motor de búsqueda de texto completo escrito completamente en JavaScript, para hacer que la búsqueda esté disponible donde sea que se ejecute JavaScript. Aprenderemos cuándo, cómo y por qué sería una gran idea implementarlo en una función sin servidor, y cuándo sería mejor mantenerlo directamente en el navegador. Olvídate de las APIs, configuraciones complejas, etc.: Orama facilitará la integración de la búsqueda en proyectos de cualquier escala.