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.

This talk has been presented at JSNation Live 2020, check out the latest edition of this JavaScript Conference.

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
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
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
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
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
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

Workshops on related topic

Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.
Micro Frontends con Module Federation y React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends con Module Federation y React
Workshop
Alex Lobera
Alex Lobera
¿Alguna vez has trabajado en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito frontend en piezas más pequeñas para que cada equipo pueda construir e implementar de forma independiente. En este masterclass aprenderás cómo construir aplicaciones de React grandes que escalen utilizando micro frontends.
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React