Mikro-Frontend: Qiankun, Wujie, Single-Spa, Iframe-Vergleich

2024-07-12

1. Überblick über das Micro-Front-End-Framework

Ein Micro-Front-End-Framework ist eine technische Lösung, die dazu dient, große Front-End-Anwendungen in mehrere kleine, unabhängige, wartbare Micro-Front-End-Anwendungen aufzuteilen. Jede Micro-Front-End-Anwendung kann entwickelt, getestet, bereitgestellt und ausgeführt werden unabhängig voneinander arbeiten und dabei die gesamte Zusammenarbeit und Benutzererfahrung beibehalten.Diese Architektur ähnelt der Microservice-Architektur, konzentriert sich jedoch auf den Front-End-Bereich

2. Gängige Micro-Front-End-Frameworks

qiankun : Entwickelt und gepflegt von Ant Financial, basierend auf Single-SPA, bietet es Technologie-Stack-unabhängige und einfache Zugriffsfunktionen. Es unterstützt mehrere Front-End-Frameworks wie Vue und React und bietet niedrige Transformationskosten und ein benutzerfreundliches Entwicklungserlebnis.
Einzel-Spa : Es handelt sich um ein leichtes JavaScript-Front-End-Routing-Framework, das sich auf die Routing-Verwaltung von Single-Page-Anwendungen (SPA) konzentriert. Obwohl es an sich kein vollständiges Micro-Frontend-Framework ist, ist es die Grundlage für viele Micro-Frontend-Implementierungen.
iframe: Obwohl iframe selbst kein Micro-Front-End-Framework ist, wird es häufig als einfache Implementierung eines Micro-Front-Ends verwendet
Unbegrenzt : Das unbegrenzte Micro-Front-End-Framework ist eine Micro-Front-End-Lösung, die auf Web Components + Iframe basiert. Es bietet eine Reihe von Vorteilen wie niedrige Kosten, hohe Geschwindigkeit, native Isolation und starke Funktionen.Im Folgenden finden Sie eine detaillierte Einführung in das unbegrenzte Micro-Front-End-Framework

Gemeinsame Punkte:Beim Routenwechsel können Sie den Code der entsprechenden Anwendung laden und im Container laufen lassen.

habenMöglichkeit zum Laden und Entladen von UnteranwendungenWenn die Seite von einer Unteranwendung zu einer anderen wechselt, kann sie normal geladen und gerendert werden.
habenFunktion zur Beibehaltung des Routing-StatusNach der Aktivierung der Unteranwendung können die Browseraktualisierung sowie das Vorwärts- und Rückwärtsrouting der Unteranwendung normal funktionieren.
Zwischen Hauptanwendung und Unteranwendung, Unteranwendung und UnteranwendungKönnen miteinander kommunizieren；
Jede MikroanwendungUnabhängige Lagerverwaltung, unabhängige Technologie-Stack-Entwicklung, unabhängige Bereitstellung und unabhängiger Betrieb；

3. Vergleich von Micro-Front-End-Frameworks

charakteristisch	Abonnieren	Unbegrenzt	Einzel-Spa	iframe
Unterstützung von Technologie-Stacks	Unabhängig vom Technologie-Stack, unterstützt React, Vue, Angular usw.	Basierend auf WebComponent, unterstützt mehrere Technologie-Stacks	Unabhängig vom Technologie-Stack, unterstützt mehrere Front-End-Frameworks	Der Technologie-Stack hat nichts damit zu tun, aber bei der Integration muss die Kompatibilität berücksichtigt werden
Zugriffsmethode	Einfacher Zugriff über die JS-API	Relativ einfach, gekapselt durch WebComponent	Komplex, Sie müssen den Lebenszyklus eines einzelnen Whirlpools konfigurieren	Einfach, eingebettet über HTML-Tags
Sandbox-Isolierung	Bietet JS-Sandbox und Stilisolierung	Verwenden Sie WebComponent für eine natürliche Isolierung	Entwickler müssen die Sandbox-Isolation selbst implementieren	Iframe natürliche Isolation
Routenmanagement	Unterstützt die Verwaltung des Routing-Status und die konfigurierbare Routing-Zuordnung	Unterstützen Sie virtuelles Routing und behalten Sie den Routing-Status bei	Als Route der obersten Ebene müssen Sie die Routen der Unteranwendung selbst verwalten.	Das Routing wird von der Anwendung innerhalb des Iframes selbst verwaltet
Bewerbungskommunikation	Bereitstellung eines Kommunikationsmechanismus zwischen Eltern-Kind-Anwendungen und Kinder-Kind-Anwendungen	Stellen Sie eine komponentenbasierte API zur Unterstützung der Kommunikation bereit	Entwickler müssen den Kommunikationsmechanismus selbst implementieren	Kann über postMessage- oder URL-Parameter usw. kommunizieren.
Vorabladen der Ressourcen	Unterstützt das Vorladen statischer Ressourcen	Unterstützt das Vorladen statischer Ressourcen	Unterstützt verzögertes Laden von Anwendungen	Unterstützt kein Vorladen, Laden bei Bedarf
Auswirkungen auf die Leistung	Niedriger, optimiert durch Sandboxing und Lazy Loading	Niedriger, aber WebComponent kann Leistungseinbußen verursachen	Niedriger, aber abhängig von der Anwendungsoptimierung	Je höher, desto größer ist der Aufwand für das Laden und Rendern von Iframes
Entwicklungserfahrung	Besser, bietet umfangreiche API und Dokumentation	Eine bessere, komponentenbasierte API ist intuitiver	Im Allgemeinen müssen Sie sich um viele Details selbst kümmern	Besser und einfacher in bestehende Anwendungen zu integrieren
Produktionsverfügbarkeit	Bewährt und geeignet für Produktionsumgebungen	Geeignet für Produktionsumgebungen, bietet jedoch möglicherweise weniger Community-Unterstützung	Geeignet für die Produktionsumgebung und muss von den Entwicklern selbst verbessert werden	Geeignet für Produktionsumgebungen, Sicherheits- und Leistungsprobleme müssen jedoch sorgfältig gehandhabt werden
Anpassungskosten	Höher, Routing, Lebenszyklus usw. müssen angepasst werden.	Moderat, hauptsächlich an WebComponent angepasst	Höher, erfordert ein tiefgreifendes Verständnis der Single-Spa-Architektur	Niedriger, es müssen jedoch Kompatibilitäts- und Leistungsprobleme beachtet werden

Das Micro-Front-End-Framework bietet viele Vorteile für die Entwicklung von Front-End-Anwendungen, wie z. B. Unabhängigkeit vom Technologie-Stack, unabhängige Entwicklung und Bereitstellung, inkrementelle Upgrades usw. Es weist jedoch auch gewisse Mängel auf, wie z. B. hohe Zugriffsschwierigkeiten und schlechte Möglichkeiten zur Ressourcenfreigabe. Daher müssen Sie bei der Entscheidung, ob Sie ein Micro-Front-End-Framework verwenden möchten, dies umfassend auf der Grundlage der spezifischen Anforderungen des Projekts und der technischen Fähigkeiten des Teams berücksichtigen. Gleichzeitig müssen wir in praktischen Anwendungen auch auf Themen wie die Auswahl des Micro-Front-End-Frameworks, das Architekturdesign, die Codeverwaltung usw. achten, um einen reibungslosen Projektfortschritt und einen stabilen Betrieb sicherzustellen System.

Technologieaustausch