Entonces, desde el punto de vista del equipo B, al equipo B solo le importan sus propios componentes, como los componentes de botón y el componente de menú desplegable, pero también sus dependencias, como un icono de flecha que se utiliza para el menú desplegable y también la biblioteca React. Y para usar la federación de módulos, el equipo B marcaría estos módulos en el gráfico, como el botón expuesto, el menú desplegable expuesto. Por lo tanto, 'expuesto' significa que están disponibles para su consumo desde la interfaz del contenedor. Y también marcaría React como biblioteca compartida. Por lo tanto, pueden compartirse con otros equipos en algún momento. Ahora Webpack crearía un contenedor para todo esto.
Entonces, en este contenedor, habría un módulo de entrada de contenedor generado por Webpack, que contiene referencias a todos los módulos expuestos, como el botón o el menú desplegable. Y Webpack también colocaría cada módulo expuesto en un archivo separado. Por ejemplo, aquí está el botón en un archivo separado, pero también el menú desplegable en un archivo separado, pero aún así sería capaz de agrupar las dependencias en la unidad del módulo expuesto. Por lo tanto, la optimización de fragmentación aún se aplica. También colocaría cada módulo compartido en un archivo separado, porque puede cargarse o no cargarse, dependiendo de si ya hay una versión vectorial disponible en algún momento. Por lo tanto, si tomamos algunos ejemplos, como si solicitas el componente de botón desde el contenedor, y el tiempo de ejecución cargaría el fragmento del botón. Por lo tanto, el archivo contendría el botón, pero también los módulos compartidos de este y requeridos por este fragmento, los cargaría en paralelo. Y en los escenarios en los que ya hay una versión de React, igual o superior disponible en algún momento, entonces la solicitud y el menú desplegable solo requerirían su propio fragmento de menú desplegable y el fragmento de React se cargaría desde otro lugar o no se cargaría en absoluto si ya se ha cargado antes.
Ahora, veamos cómo el equipo A utiliza este contenedor generado por el equipo B. Así es como se ve el gráfico de módulos para el equipo A. El equipo A solo se preocupa por sus propios componentes y cada componente del equipo B se editaría como módulos remotos. Por lo tanto, solo estoy diciendo que hay un contenedor y hay alguien en algún lugar y un menú desplegable que se consume desde el contenedor. Desde el punto de vista de Webpack, hay un módulo remoto, como el módulo de menú desplegable y cada módulo remoto apunta al contenedor como externo en algún momento. Pero aquí hay un desafío porque cargar módulos desde el contenedor de forma asíncrona requiere un poco de creatividad para resolver este problema porque si un módulo de inicio de sesión simplemente importa el componente de botón y la importación suele ser una operación síncrona. Por lo tanto, Webpack automáticamente elevaría cada operación asíncrona requerida para cargar estos módulos remotos hasta el siguiente límite asíncrono. Un límite asíncrono es como una declaración de importación asíncrona o algo así. Por lo tanto, en este caso, si haces clic en el enlace de inicio de sesión, que normalmente carga el código del módulo de inicio de sesión, cargará en paralelo el código del componente de botón desde el contenedor. Por lo tanto, haces clic en el enlace de inicio de sesión y el código del módulo de inicio de sesión y el código del componente de botón se cargarán en paralelo una vez desde la compilación local, una vez desde la compilación del contenedor. Sí. Y lo mismo ocurre con los módulos compartidos, pero no se explica en detalle aquí. Genial. Entonces, ¿cómo puedo usarlo? Para usarlo, hay un complemento de federación de módulos disponible en Webpack 5 y con diferentes propiedades tienes acceso a crear un contenedor, consumir otros contenedores, pero también compartir módulos en algún momento. Veamos cómo crear un contenedor. Para crear un contenedor, debes exponer módulos desde el contenedor, lo cual se hace utilizando la propiedad 'exposes'.
Comments