Technologieaustausch

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

2024-07-12

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

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

  1. 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.
  2. 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.
  3. iframe: Obwohl iframe selbst kein Micro-Front-End-Framework ist, wird es häufig als einfache Implementierung eines Micro-Front-Ends verwendet
  4. 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

charakteristischAbonnierenUnbegrenztEinzel-Spaiframe
Unterstützung von Technologie-StacksUnabhängig vom Technologie-Stack, unterstützt React, Vue, Angular usw.Basierend auf WebComponent, unterstützt mehrere Technologie-StacksUnabhängig vom Technologie-Stack, unterstützt mehrere Front-End-FrameworksDer Technologie-Stack hat nichts damit zu tun, aber bei der Integration muss die Kompatibilität berücksichtigt werden
ZugriffsmethodeEinfacher Zugriff über die JS-APIRelativ einfach, gekapselt durch WebComponentKomplex, Sie müssen den Lebenszyklus eines einzelnen Whirlpools konfigurierenEinfach, eingebettet über HTML-Tags
Sandbox-IsolierungBietet JS-Sandbox und StilisolierungVerwenden Sie WebComponent für eine natürliche IsolierungEntwickler müssen die Sandbox-Isolation selbst implementierenIframe natürliche Isolation
RoutenmanagementUnterstützt die Verwaltung des Routing-Status und die konfigurierbare Routing-ZuordnungUnterstützen Sie virtuelles Routing und behalten Sie den Routing-Status beiAls Route der obersten Ebene müssen Sie die Routen der Unteranwendung selbst verwalten.Das Routing wird von der Anwendung innerhalb des Iframes selbst verwaltet
BewerbungskommunikationBereitstellung eines Kommunikationsmechanismus zwischen Eltern-Kind-Anwendungen und Kinder-Kind-AnwendungenStellen Sie eine komponentenbasierte API zur Unterstützung der Kommunikation bereitEntwickler müssen den Kommunikationsmechanismus selbst implementierenKann über postMessage- oder URL-Parameter usw. kommunizieren.
Vorabladen der RessourcenUnterstützt das Vorladen statischer RessourcenUnterstützt das Vorladen statischer RessourcenUnterstützt verzögertes Laden von AnwendungenUnterstützt kein Vorladen, Laden bei Bedarf
Auswirkungen auf die LeistungNiedriger, optimiert durch Sandboxing und Lazy LoadingNiedriger, aber WebComponent kann Leistungseinbußen verursachenNiedriger, aber abhängig von der AnwendungsoptimierungJe höher, desto größer ist der Aufwand für das Laden und Rendern von Iframes
EntwicklungserfahrungBesser, bietet umfangreiche API und DokumentationEine bessere, komponentenbasierte API ist intuitiverIm Allgemeinen müssen Sie sich um viele Details selbst kümmernBesser und einfacher in bestehende Anwendungen zu integrieren
ProduktionsverfügbarkeitBewährt und geeignet für ProduktionsumgebungenGeeignet für Produktionsumgebungen, bietet jedoch möglicherweise weniger Community-UnterstützungGeeignet für die Produktionsumgebung und muss von den Entwicklern selbst verbessert werdenGeeignet für Produktionsumgebungen, Sicherheits- und Leistungsprobleme müssen jedoch sorgfältig gehandhabt werden
AnpassungskostenHöher, Routing, Lebenszyklus usw. müssen angepasst werden.Moderat, hauptsächlich an WebComponent angepasstHöher, erfordert ein tiefgreifendes Verständnis der Single-Spa-ArchitekturNiedriger, 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.