Compartir tecnología

Micro front-end: Qiankun, Wujie, spa único, comparación de iframe

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Descripción general del marco de micro front-end

Un marco de micro-front-end es una solución técnica diseñada para dividir grandes aplicaciones de front-end en múltiples aplicaciones de micro-front-end pequeñas, independientes y fáciles de mantener. Cada aplicación de micro-front-end se puede desarrollar, probar, implementar y ejecutar. de forma independiente manteniendo la colaboración general y la experiencia del usuario.Esta arquitectura es similar a la arquitectura de microservicios, pero se centra en el área front-end.

2. Marcos de micro front-end comunes

  1. qiankun : Desarrollado y mantenido por Ant Financial, basado en Single-SPA, proporciona funciones de acceso simple e independiente de la pila de tecnología. Admite múltiples marcos de front-end como Vue y React, y tiene bajos costos de transformación y una experiencia de desarrollo amigable.
  2. spa individual : Es un marco de enrutamiento front-end de JavaScript liviano, que se centra en la gestión de enrutamiento de aplicaciones de una sola página (SPA). Aunque no es un marco de microfrontend completo en sí mismo, es la base para muchas implementaciones de microfrontend.
  3. iframe: Aunque el iframe en sí no es un marco de micro front-end, a menudo se utiliza como una implementación simple de micro front-end.
  4. Ilimitado : El marco de micro front-end ilimitado es una solución de micro front-end basada en componentes web + iframe. Tiene una serie de ventajas como bajo costo, velocidad rápida, aislamiento nativo y funciones sólidas.La siguiente es una introducción detallada al marco de micro front-end ilimitado.

Puntos comunes:Cuando se cambia la ruta, puede cargar el código de la aplicación correspondiente y dejar que se ejecute en el contenedor.

  • tenerCapacidad para cargar y descargar subaplicaciones., cuando la página cambia de una subaplicación a otra, se puede cargar y representar normalmente;
  • tenerCapacidad de retención del estado de enrutamiento, después de activar la subaplicación, la actualización del navegador y el enrutamiento hacia adelante y hacia atrás de la subaplicación pueden funcionar normalmente;
  • Entre aplicación principal y subaplicación, subaplicación y subaplicaciónPueden comunicarse entre sí
  • Cada microaplicaciónGestión de almacén independiente, desarrollo de pila de tecnología independiente, implementación independiente y operación independiente

3. Comparación de marcos de micro front-end

característicaqiankunIlimitadospa individualiframe
Soporte de pila de tecnologíaPila de tecnología independiente, compatible con React, Vue, Angular, etc.Basado en WebComponent, admite múltiples pilas de tecnologíaPila de tecnología independiente, admite múltiples marcos de front-endLa pila de tecnología no tiene nada que ver, pero la integración debe considerar la compatibilidad.
Método de accesoSencillo, acceso a través de JS APIRelativamente simple, encapsulado a través de WebComponentComplejo, es necesario configurar el ciclo de vida de un solo spaSencillo, integrado mediante etiquetas HTML
aislamiento de caja de arenaProporciona aislamiento de estilo y zona de pruebas JSUtilice WebComponent para un aislamiento naturalLos desarrolladores deben implementar el aislamiento de la zona de pruebas por sí mismosaislamiento natural del iframe
Gestión de rutasAdmite el mantenimiento del estado de enrutamiento y el mapeo de enrutamiento configurableAdmite enrutamiento virtual y mantiene el estado del enrutamientoComo ruta de nivel superior, usted mismo debe administrar las rutas de subaplicaciones.El enrutamiento lo gestiona la aplicación dentro del propio iframe.
comunicación de la aplicaciónProporcionar un mecanismo de comunicación entre aplicaciones padre-hijo y aplicaciones hijo-hijo.Proporcionar API basada en componentes para admitir la comunicación.Los desarrolladores deben implementar el mecanismo de comunicación ellos mismos.Puede comunicarse a través de parámetros postMessage o URL, etc.
Precarga de recursosAdmite precarga de recursos estáticosAdmite precarga de recursos estáticosAdmite carga diferida de aplicacionesNo admite precarga, carga bajo demanda
Impacto en el rendimientoMás bajo, optimizado mediante sandboxing y carga diferidaMás bajo, pero WebComponent puede tener una sobrecarga de rendimientoMenor, pero dependiente de la optimización de la aplicaciónA mayor altura, la sobrecarga de carga y renderizado de iframe es mayor
Experiencia de desarrolloMejor, proporciona documentación y API enriquecidasLa API mejor basada en componentes es más intuitivaGeneralmente, debes manejar muchos detalles tú mismo.Mejor, fácil de integrar en aplicaciones existentes
disponibilidad de producciónProbado y adecuado para entornos de producción.Adecuado para entornos de producción, pero puede tener menos soporte comunitario.Adecuado para entornos de producción y debe ser mejorado por los propios desarrolladores.Adecuado para entornos de producción, pero los problemas de seguridad y rendimiento deben manejarse con cuidado.
Costo de adaptaciónMayor, necesidad de adaptar el enrutamiento, el ciclo de vida, etc.Moderado, principalmente adaptado a WebComponent.Más alto, requiere una comprensión profunda de la arquitectura de un solo spa.Menor, pero hay que prestar atención a los problemas de compatibilidad y rendimiento.

El marco micro front-end aporta muchas ventajas al desarrollo de aplicaciones front-end, como independencia de la pila de tecnología, desarrollo e implementación independientes, actualizaciones incrementales, etc. Sin embargo, también tiene ciertas deficiencias, como una gran dificultad de acceso y una capacidad deficiente para compartir recursos. Por lo tanto, al elegir si utilizar un marco de micro-front-end, debe considerarlo de manera integral en función de las necesidades específicas del proyecto y las capacidades técnicas del equipo. Al mismo tiempo, en aplicaciones prácticas, también debemos prestar atención a cuestiones como la selección del marco micro-front-end, el diseño de la arquitectura, la gestión del código, etc., para garantizar el buen progreso del proyecto y el funcionamiento estable del sistema.