Autor: JD Logística Ning Chong
1. Introducción
¿Qué son las microfrontends?
Las microfrontends son microservicios que viven en el navegador.
Este artículo analiza principalmente la biblioteca de funciones single-spa-vue de la sub-aplicación de carga de la aplicación base single-spa del marco micro front-end, y utiliza el análisis de la dimensión del código para que todos entiendan lo que se hace cuando single-spa carga el sub-aplicación. Cómo mantener el estado de las subaplicaciones mediante la optimización de la biblioteca de funciones single-spa-vue.
Dado que el análisis se realiza en la dimensión del código, se requiere que los lectores tengan una cierta comprensión de spa único, y el efecto de lectura será mejor.
2 El proceso de carga de sub-aplicaciones de un solo spa
La configuración de carga de la aplicación secundaria configurada en la aplicación base insertará las aplicaciones secundarias chunk-vendors.js y app.js en la página en el método de la aplicación para configurar el objeto de aplicación secundaria y ejecutará las dos aplicaciones secundarias chunk- vendors.js y app.js El js del que depende la aplicación.
Después de ejecutar el método de la aplicación, el js del que depende la subaplicación se inserta en la estructura dom después de la página.
Del proceso de ejecución del método de la aplicación anterior, podemos ver que la aplicación base carga subaplicaciones, que es similar a la forma en que el marco vue carga los recursos js después del empaquetado. Entonces, ¿por qué solo necesita cargar app.js y chunk-vendors.js de la subaplicación para representar la subaplicación en la página? A continuación, echemos un vistazo a cómo se configura el método main.js del archivo de entrada de la aplicación secundaria.
3 Configuración en el main.js de la sub-aplicación
En el main.js de la sub-aplicación, podemos ver que la configuración convencional 1 es reemplazada por el formato de la configuración 2.
En la configuración 2, pasaremos la configuración actual de vue a la biblioteca de funciones single-spa-vue. Incluyendo el, método de renderizado, objeto Vue. A través del paquete de singleSpaVue, devuelva los métodos de ciclo de vida de spa único arranque, montaje y desmontaje.
- bootstrap: función de arranque, que se llama antes de que el contenido de la aplicación se monte en la página por primera vez, y solo se ejecutará una vez.
- mount: Función de montaje, que se ejecutará cada vez que se monte la subaplicación.
- unmount: función unmount, que se ejecutará cada vez que se desinstale la sub-aplicación.
Es decir, cuando la aplicación base carga subaplicaciones, utiliza la función single-spa-vue para generar cada ciclo de vida de single-spa, que es llamado por la aplicación base al cargar subaplicaciones.
Echemos un vistazo a cómo single-spa-vue genera varias funciones de ciclo de vida.
4 estructura de código fuente single-spa-vue
La biblioteca de funciones single-spa-vue puede ayudarnos a generar el ciclo de vida de carga de subaplicaciones. Puede descargar el código fuente de la biblioteca de funciones single-spa-vue a través del siguiente enlace: dirección GIT single-spa-vue.
El código fuente de single-spa-vue es muy simple, solo hay unas pocas funciones que generan el ciclo de vida de single-spa.
- Método single-spa-vue: el único método que la biblioteca de funciones single-spa-vue proporciona servicios externos para recibir elementos de configuración y devolver un objeto que contiene cada ciclo de vida de single-spa.
- Otros métodos en single-spa-vue bootstrap, mount, update y unmount son métodos utilizados para generar funciones de ciclo de vida correspondientes a single-spa.
Vamos a presentar la función y la implementación de estos métodos en detalle.
5 análisis de código fuente de un solo spa-vue
El método singleSpaVue proporcionado en single-spa-vue recibirá información de configuración de userOpts, y la información de configuración se fusionará con el elemento de configuración predeterminado defaultOpts antes del procesamiento posterior.
5.1 Elemento de configuración defaultOpts
Para los elementos de configuración predeterminados, existen los siguientes elementos. Aquí solo presentamos los elementos necesarios, appOptions, Vue/createApp. La plantilla que contiene no se usa en single-spa-vue, pero se usa en single-spa-html.
// 默认配置项列表
const defaultOpts = {
// required opts
appOptions: null,
template: null,
// sometimes require opts
Vue: null,
createApp: null,
handleInstance: null
}1) Introducción a los elementos de configuración de appOptions
- appOptions: los elementos de configuración de la aplicación se pasarán como parámetros al método Vue cuando se inicialice la instancia de Vue. Los elementos de configuración en appOptions se presentarán en detalle a continuación.
- el: El dom base que la sub-aplicación necesita montar, es decir, el dom que vue necesita montar.
- render/plantilla: elemento de configuración de render/plantilla de vue.
- datos: el objeto de parámetro inicializado se montará directamente en la instancia de vue cuando se ejecute la función de montaje.
2) Introducción a los elementos de configuración de Vue/createApp
El elemento de configuración de Vue/createApp se usa para generar una instancia de Vue, y la biblioteca de funciones single-spa-vue puede generar una instancia de Vue en el método de montaje a través del objeto Vue entrante. También puede pasar el método createApp y la aplicación secundaria devuelve la instancia de Vue en el método createApp.
A continuación, veremos el papel de estos elementos de configuración en el método de generación del ciclo de vida.
5.2 Método de entrada: singleSpaVue
El método singleSpaVue primero realizará las siguientes comprobaciones de validez en los parámetros de entrada, y las comprobaciones específicas incluyen los siguientes cuatro elementos.
- Si el elemento de configuración userOpts es un objeto.
- Si existe la configuración Vue/createApp utilizada para crear una instancia vue.
- Si existe el elemento de configuración appOptions utilizado para generar la instancia de vue.
- Si el dom montado por la instancia de vue es correcto, verifique la validez de appOptions.el.
Una vez superada la comprobación de validez, se llamará a los métodos de arranque, montaje, desmontaje y actualización para generar las funciones del ciclo de vida de la subaplicación de carga de spa único, respectivamente.
A continuación se describe en detalle cómo se genera cada función de ciclo de vida.
5.3 Función de arranque: arranque
La función bootstrap bootstrap se llama cuando el contenido de la aplicación se monta por primera vez en la página.
La función de arranque determinará primero si loadRootComponent existe en el elemento de configuración. El autor entiende que el elemento de configuración loadRootComponent se puede usar para cargar la aplicación principal u otros recursos dependientes de los que depende la subaplicación actual.
Por ejemplo, la página A depende del componente B. Al cargar la página A, puede cargar los recursos estáticos del componente B en el método loadRootComponent y representarlos en la página. La página A puede usar directamente algunos recursos o dom proporcionados por el componente B.
Si loadRootComponent no está configurado, regresará directamente sin ningún procesamiento.
5.4 Ciclo de vida del montaje de la subaplicación: montaje
Cuando la aplicación secundaria se monta en la página cada vez, single-spa ejecutará la función de ciclo de vida de montaje, single-spa-vue se usa en la función de montaje para inicializar la instancia vue de la aplicación secundaria y montar la instancia a la página La función de montaje recibirá tres parámetros, que son las opciones de parámetro pasadas por singleSpaVue, la lista de instancias de subaplicación actualmente montadas globalmente por instancias montadas de single-spa-vue y los accesorios de instancia de spa
único de la subaplicación actual registrado en la aplicación base
Ingrese los datos recibidos, solo el atributo de nombre de props se usa aquí para identificar la sub-aplicación montada actualmente.
En el método de montaje, se realizan principalmente las siguientes cosas
1) Dar formato al elemento de configuración de la aplicación appOptions
El método de montaje utilizará el método resolveAppOptions para formatear el elemento de configuración appOptions de la aplicación.
En el método resolveAppOptions, si appOptions es un método, ejecute el método y pase los props de parámetros pasados por la aplicación base a través del parámetro customProps.
La aplicación secundaria puede obtener los parámetros pasados por la aplicación principal en el método appOptions y realizar un procesamiento diferente según el estado de la aplicación principal.
2) Inicialice el objeto DOM que la subaplicación necesita montar.
Hay muchas configuraciones y métodos para inicializar dom, y el se obtendrá de muchos elementos de configuración.El código es relativamente simple, por lo que no entraré en detalles aquí. Solo se muestra la prioridad del valor para su referencia.
appOptions.el > accesorios.domElement > accesorios.nombre
Después de formatear el nodo dom, lo siguiente comienza a montar la página en el dom.
3) Cree un ejemplo de vue y móntelo en la página
Antes de cargar la página, habrá un elemento de configuración: replaceMode, el elemento de configuración replaceMode se usa para identificar si el contenido bajo el nodo el necesita ser reemplazado. Si el replaceMode predeterminado es falso, se creará un div en blanco con la clase single-spa-container debajo del nodo el para guardar la subaplicación.
Tome el código en la demostración como ejemplo:
Cuando el replaceMode predeterminado es falso, el contenido de la base y el contenido de vue1 coexistirán. Como se muestra abajo:
Si cambia replaceMode a verdadero, encontrará que el contenido de la base se sobrescribirá con el contenido de vue1.
Como se muestra abajo:
Después de configurar el método de montaje, comience a montar la aplicación secundaria en el dom.
Aquí se admiten dos métodos de montaje, uno es montar usando el método createApp de vue3 y el otro es montar usando el nuevo método Vue de vue2. El método de montaje aquí es en realidad el mismo que nuestra configuración de usar vue para montar en dom.
A través de los pasos anteriores, la sub-aplicación ahora está montada en el dom en la página html.
5.5 Actualizar función de ciclo de vida: actualizar
Cuando se llama a la función de paquete.update(), se activará el método de actualización. Dado que el autor no usa el paquete de características avanzadas, no lo presentaré aquí.
5.6 Ciclo de vida de desinstalación de subaplicaciones: desmontar
Cuando la URL de la página cambia, el método de desmontaje se activará al salir de la ruta de la página de la subaplicación.
Las principales cosas que hacer en el método de desmontaje son:
- Desinstalar aplicación vue
- eliminar instancia de vue
- Al mismo tiempo, borre la página dom.
Después de realizar la operación de desmontaje, se borrarán los datos y el dominio de la aplicación secundaria.
5.7 Resumen
Lo anterior es todo el proceso de montaje de subaplicaciones con la biblioteca de funciones single-spa-vue proporcionada oficialmente por single-spa. A través del análisis anterior, encontramos que la biblioteca de funciones single-spa-vue devolverá un objeto que contiene cuatro métodos de arranque, montaje, actualización y desmontaje llamando al método singleSpaVue. El método correspondiente se ejecutará en el ciclo de vida de carga de aplicaciones secundarias en la aplicación base, y la aplicación secundaria se monta en la aplicación base o se destruye desde la aplicación base a través del método de ejecución.
Mediante el proceso de carga de subaplicaciones en single-spa-vue, single-spa ensambla cada subaplicación en una aplicación compleja y administra cada subaplicación por separado sin que el usuario lo sepa.
Cuando single-spa carga subaplicaciones, existen otras versiones además de la versión vue, pero la idea de carga es similar. Todas se cargan en el html en la biblioteca de funciones, y no se presentarán otras aquí. tipo de carga.
single-spa Otras formas de cargar sub-aplicaciones: single-spa-react, single-spa-html
6 Retención de estado de sub-aplicación
En el proceso de desarrollo real, el autor encontró algunas páginas que necesitan usar keep-alive en vue para preservar el estado. Aunque la página se destruye durante el proceso de cambio de página, el estado de la página debe conservarse, pero estamos analizando spa-vue Cuando se implementa el método de desmontaje, se encuentra que si se cambia la página, la sub-aplicación y la instancia de vue se destruyen, y el keep-alive en la sub-aplicación no surte efecto en este momento.
Como se muestra abajo:
Después de ingresar el contenido en la entrada, el proyecto de spa tradicional puede registrar el estado a través de keep-alive, y cuando se cambia la ruta de la página, volver a cambiar y aún mantener el estado. Pero si usa single-spa-vue directamente, el contenido de entrada 1111 en la entrada se borrará cuando la aplicación secundaria active el desmontaje. En respuesta a esta situación, el autor ha realizado algunas modificaciones en la biblioteca de clases single-spa-vue.
El contenido de la modificación es el siguiente:
6.1 La subaplicación cambió de destruida a oculta
Se agrega un elemento de configuración al elemento de configuración single-spa-vue.De acuerdo con si hay un elemento de configuración isKeepAlive en el elemento de configuración, se juzga si ocultar el dom actual o eliminarlo. De esta forma, cuando se activa el método de desmontaje de la subaplicación, la subaplicación no se elimina, sino que permanece.
Al mismo tiempo, el autor también ha realizado algunas optimizaciones en la configuración de la ruta de vue.Cuando la página no existe, se montará un componente vacío en la subaplicación en el dom en este momento, para evitar que aunque la página está oculta, el dom todavía está en el html, lo que resulta en demasiado dom de página.
6.2 La subaplicación cambió de nueva a pantalla
Cuando se llama al método de montaje en el elemento de configuración single-spa-vue para montar la sub-aplicación, juzgará si la sub-aplicación actual existe. Si la sub-aplicación existe, la sub-página se mostrará directamente. Dado que la sub-aplicación no ha sido destruida, en este momento la sub-aplicación El keep-alive en la aplicación siempre tendrá efecto y guardará el estado de la página.
A través de la optimización de los métodos de montaje y desmontaje de la biblioteca de clases single-spa-vue, el usuario realmente puede usar la página sin problemas como si usara vue, y puede mantener el estado de la página para mejorar la experiencia del usuario.