Partage de technologie

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

Le framework micro front-end illimité est une solution micro front-end basée sur des composants Web + iframe. Il présente une série d'avantages tels qu'un faible coût, une vitesse rapide, une isolation native et des fonctions puissantes. Ce qui suit est une introduction détaillée au framework micro front-end illimité :

1. Contexte et aperçu

Le micro front-end est un moyen technique et une stratégie de méthode permettant à plusieurs équipes de créer conjointement des applications Web modernes en publiant des fonctions de manière indépendante. Le framework micro front-end illimité offre aux développeurs une solution micro front-end efficace et flexible en introduisant les composants Web et la technologie iframe. Ce cadre vise à répondre aux principales demandes des utilisateurs des solutions micro-frontales existantes en termes de coût d'adaptation, d'isolation de style, de performances d'exécution, d'écran blanc de page, de communication sous-application, de maintien de la sous-application, d'activation multi-application, de Vite. support du framework, partage d'applications, etc. Le problème.

2. Fonctionnalités de base

1. faible coût: L'application principale du cadre micro frontal illimité a un faible coût d'utilisation, et le coût d'adaptation des sous-applications est également relativement faible.
2. grande vitesse : Le premier écran de la sous-application s'ouvre rapidement et la sous-application s'exécute rapidement. Cela est dû à la gestion optimisée des ressources et à la stratégie de préchargement du framework illimité.
3. isolement indigène : Les styles CSS peuvent obtenir une isolation native stricte via les composants Web, et JS exécuté dans iframe atteint également une isolation native stricte. Ce mécanisme d'isolation garantit l'indépendance entre les sous-applications et évite les conflits de style et les conflits de script.
4. Puissant : Le cadre micro frontal illimité prend en charge le maintien des sous-applications, l'imbrication de sous-applications, l'activation multi-applications, le partage d'applications, la communication décentralisée, etc. Ces fonctionnalités rendent le cadre illimité plus flexible et évolutif lorsqu'il s'agit d'applications frontales complexes.

3. Mise en œuvre technique

Le framework micro front-end illimité adopte le mode sandbox de Web Components + iframe, et obtient une isolation native et un fonctionnement efficace en héritant des avantages de l'iframe et en résolvant ses lacunes. Les méthodes de mise en œuvre spécifiques comprennent :

1. Créer une iframe qui a la même origine que l'application principale: Le chemin transporte les informations de routage des sous-routes. La même origine est de faciliter la communication entre les applications.
2. Analyser l'entrée HTML de la sous-application: Identifiez la partie HTML, séparez le style et le js ; traitez le CSS et réinjectez le HTML ; créez le composant Web et montez le HTML ;
3. Intercepter l'objet document dans l'iframe: Pointez le DOM vers shadowRoot de manière unifiée pour résoudre le problème des fenêtres contextuelles ou des composants bouillonnants ne pouvant pas couvrir l'application principale.
4. mécanisme de communication: L'iframe et l'application principale sont dans le même domaine et partagent naturellement la mémoire pour la communication. Unbounded fournit un mécanisme d'événements décentralisé pour résoudre les problèmes de communication.
5. Gestion de l'état des itinéraires: Le mouvement avant et arrière du navigateur peut naturellement affecter l'iframe. À ce stade, les changements de routage de l'iframe sont surveillés et synchronisés avec l'application principale. Si le navigateur est actualisé, l'itinéraire enregistré peut être relu à partir de l'URL. .

4. Avantages et applications

Les avantages du framework micro-frontal illimité sont son faible coût, sa vitesse élevée, son isolation native et ses fonctionnalités puissantes. Cela lui confère un avantage significatif lorsqu’il s’agit d’applications frontales volumineuses et complexes. Dans le même temps, le cadre illimité prend également en charge une variété de piles technologiques frontales, telles que Vue, React, etc., permettant aux développeurs de choisir de manière flexible les piles technologiques en fonction des besoins du projet.

En termes de scénarios d'application, le cadre micro-frontal illimité convient aux applications Web à grande échelle qui nécessitent un développement collaboratif efficace, un déploiement indépendant et des mises à niveau. En introduisant le cadre illimité, les développeurs peuvent diviser les applications frontales en plusieurs applications micro-frontales indépendantes, et chaque application peut être développée, testée et déployée indépendamment. Cela améliore non seulement l’efficacité du développement, mais réduit également la complexité et les risques des projets.