Autor: JD Logistics Ning Chong
1. Einleitung
Was sind Micro-Frontends?
Micro-Frontends sind Microservices, die im Browser leben.
Dieser Artikel analysiert hauptsächlich die Single-Spa-Vue-Funktionsbibliothek der Unteranwendung zum Laden von Single-Spa-Basisanwendungen des Mikro-Front-End-Frameworks und verwendet die Codedimensionsanalyse, damit jeder versteht, was getan wird, wenn Single-Spa lädt Unteranwendung. So behalten Sie den Status von Unteranwendungen bei, indem Sie die Single-Spa-Vue-Funktionsbibliothek optimieren.
Da die Analyse in der Code-Dimension erfolgt, ist ein gewisses Single-Spa-Verständnis beim Leser erforderlich und der Leseeffekt besser.
2 Der Prozess des Ladens von Einzel-Spa-Unteranwendungen
Die in der Basisanwendung konfigurierte ladende Unteranwendungskonfiguration fügt die Unteranwendungen chunk-vendors.js und app.js in die Seite in der App-Methode zum Konfigurieren des Unteranwendungsobjekts ein und führt die beiden Unteranwendungen chunk- vendors.js und app.js Die js, von denen die Anwendung abhängt.
Nachdem die app-Methode ausgeführt wurde, wird das js, von dem die Unteranwendung abhängt, nach der Seite in die dom-Struktur eingefügt.
Aus dem Ausführungsprozess der obigen App-Methode können wir ersehen, dass die Basisanwendung Unteranwendungen lädt, ähnlich wie das vue-Framework js-Ressourcen nach dem Packen lädt. Warum müssen Sie also nur die app.js und chunk-vendors.js der Unteranwendung laden, um die Unteranwendung auf der Seite zu rendern. Sehen wir uns als Nächstes an, wie die main.js-Methode der Eintragsdatei der Unteranwendung konfiguriert ist.
3 Konfiguration in der main.js der Unteranwendung
In der main.js der Unteranwendung können wir sehen, dass die herkömmliche Konfiguration 1 durch das Format von Konfiguration 2 ersetzt wird.
In Konfiguration 2 übergeben wir die aktuelle vue-Konfiguration an die single-spa-vue-Funktionsbibliothek. Einschließlich el, Render-Methode, Vue-Objekt. Geben Sie durch das Paketieren von singleSpaVue die Single-Spa-Lebenszyklusmethoden bootstrap, mount und unmount zurück.
- Bootstrap: Bootstrap-Funktion, die aufgerufen wird, bevor der Anwendungsinhalt zum ersten Mal auf der Seite bereitgestellt wird, und nur einmal ausgeführt wird.
- mount: Mount-Funktion, die jedes Mal ausgeführt wird, wenn die Unteranwendung gemountet wird.
- unmount: Unmount-Funktion, die jedes Mal ausgeführt wird, wenn die Unteranwendung deinstalliert wird.
Das heißt, wenn die Basisanwendung Unteranwendungen lädt, verwendet sie die Single-Spa-Vue-Funktion, um jeden Lebenszyklus von Single-Spa zu generieren, der von der Basisanwendung beim Laden von Unteranwendungen aufgerufen wird.
Werfen wir einen Blick darauf, wie Single-Spa-Vue verschiedene Lebenszyklusfunktionen generiert.
4 Single-Spa-Vue-Quellcodestruktur
Die Single-Spa-Vue-Funktionsbibliothek kann uns dabei helfen, den Lebenszyklus des Ladens von Unteranwendungen zu generieren. Sie können den Quellcode der Single-Spa-Vue-Funktionsbibliothek über den folgenden Link herunterladen: Single-Spa-Vue-GIT-Adresse.
Der Quellcode von single-spa-vue ist sehr einfach, es gibt nur wenige Funktionen, die den Lebenszyklus von single-spa generieren.
- Single-Spa-Vue-Methode: Die einzige Methode, mit der die Single-Spa-Vue-Funktionsbibliothek externe Dienste bereitstellt, um Konfigurationselemente zu empfangen und ein Objekt zurückzugeben, das jeden Single-Spa-Lebenszyklus enthält.
- Andere Methoden in Single-Spa-Vue Bootstrap, Mount, Update und Unmount sind Methoden, die verwendet werden, um Single-Spa-entsprechende Lebenszyklusfunktionen zu generieren.
Lassen Sie uns die Funktion und Implementierung dieser Methoden im Detail vorstellen.
5 Single-Spa-Vue-Quellcodeanalyse
Die in single-spa-vue bereitgestellte singleSpaVue-Methode empfängt userOpts-Konfigurationsinformationen, und die Konfigurationsinformationen werden vor der nachfolgenden Verarbeitung mit dem Standardkonfigurationselement defaultOpts zusammengeführt.
5.1 Konfigurationselement defaultOpts
Für die Standardkonfigurationselemente gibt es die folgenden Elemente.Hier stellen wir nur die erforderlichen Elemente vor, appOptions, Vue/createApp. Die darin enthaltene Vorlage wird nicht in Single-Spa-Vue verwendet, aber in Single-Spa-HTML.
// 默认配置项列表
const defaultOpts = {
// required opts
appOptions: null,
template: null,
// sometimes require opts
Vue: null,
createApp: null,
handleInstance: null
}1) Einführung in die Konfigurationselemente von appOptions
- appOptions: Die Konfigurationselemente der Anwendung werden als Parameter an die Vue-Methode übergeben, wenn die Vue-Instanz initialisiert wird. Die Konfigurationselemente in appOptions werden im Folgenden detailliert vorgestellt.
- el: Der Basis-Dom, den die Unteranwendung bereitstellen muss, d. h. der Dom, den vue bereitstellen muss.
- render/template: Das Render-/Template-Konfigurationselement von vue.
- data: Das initialisierte Parameterobjekt wird direkt an die vue-Instanz gemountet, wenn die Mount-Funktion mount ausgeführt wird.
2) Einführung in die Vue/createApp-Konfigurationselemente
Das Konfigurationselement Vue/createApp wird verwendet, um eine Vue-Instanz zu generieren, und die Single-Spa-Vue-Funktionsbibliothek kann eine Vue-Instanz in der Mount-Methode über das eingehende Vue-Objekt generieren. Sie können auch die createApp-Methode übergeben, und die Unteranwendung gibt die Vue-Instanz in der createApp-Methode zurück.
Nachfolgend sehen wir die Rolle dieser Konfigurationselemente in der Lebenszyklusgenerierungsmethode
5.2 Eingabemethode: singleSpaVue
Das SingleSpaVue-Verfahren führt zunächst die folgenden Gültigkeitsprüfungen an den Eingabeparametern durch, und die spezifischen Prüfungen umfassen die folgenden vier Punkte.
- Ob das Konfigurationselement userOpts ein Objekt ist.
- Ob die zum Erstellen einer Vue-Instanz verwendete Konfiguration Vue/createApp vorhanden ist.
- Ob das zum Generieren der vue-Instanz verwendete Konfigurationselement appOptions vorhanden ist.
- Ob der von der vue-Instanz gemountete Dom korrekt ist, prüft appOptions.el auf Gültigkeit.
Nachdem die Gültigkeitsprüfung bestanden ist, werden die Bootstrap-, Mount-, Unmount- und Update-Methoden aufgerufen, um jeweils die Lebenszyklusfunktionen der Einzel-Spa-Lade-Unteranwendung zu generieren.
Im Folgenden wird detailliert beschrieben, wie jede Lebenszyklusfunktion generiert wird.
5.3 Bootstrap-Funktion: Bootstrap
Die Bootstrap-Funktion bootstrap wird aufgerufen, wenn der Anwendungsinhalt zum ersten Mal auf der Seite bereitgestellt wird.
Die Bootstrap-Funktion bestimmt zuerst, ob loadRootComponent im Konfigurationselement vorhanden ist. Der Autor versteht, dass das Konfigurationselement loadRootComponent verwendet werden kann, um die übergeordnete Anwendung oder andere abhängige Ressourcen zu laden, von denen die aktuelle Unteranwendung abhängt.
Beispielsweise hängt Seite A von Komponente B ab. Beim Laden von Seite A können Sie die statischen Ressourcen von Komponente B in der Methode loadRootComponent laden und auf der Seite darstellen. Seite A kann direkt einige Ressourcen oder Doms verwenden, die von Komponente B bereitgestellt werden.
Wenn loadRootComponent nicht konfiguriert ist, wird es direkt ohne Verarbeitung zurückgegeben.
5.4 Lebenszyklus der Unteranwendung Mount: mount
Wenn die Unteranwendung jedes Mal auf der Seite gemountet wird, führt Single-Spa die Mount-Lebenszyklusfunktion aus, Single-Spa-Vue wird in der Mount-Funktion verwendet, um die Vue-Instanz der Unteranwendung zu initialisieren und die Instanz zu mounten zur Seite. Die Mount-Funktion erhält drei Parameter, nämlich die von singleSpaVue übergebenen Parameteroptionen, die Liste der Unteranwendungsinstanzen, die derzeit global von single-spa-vue-mountedInstances gemountet werden, und die Single-spa- Instanzprops
der aktuellen Unteranwendung registriert in der Basisanwendung
Geben Sie die empfangenen Daten ein, hier wird nur das Namensattribut von Props verwendet, um die aktuell gemountete Unteranwendung zu identifizieren.
Bei der Mount-Methode werden hauptsächlich die folgenden Dinge getan
1) Formatieren Sie das Anwendungskonfigurationselement appOptions
Die mount-Methode verwendet die resolveAppOptions-Methode, um das Konfigurationselement appOptions der Anwendung zu formatieren.
Wenn appOptions eine Methode ist, führen Sie in der resolveAppOptions-Methode die Methode aus und übergeben Sie die von der Basisanwendung übergebenen Parameterprops über den customProps-Parameter.
Die Unteranwendung kann die von der übergeordneten Anwendung in der appOptions-Methode übergebenen Parameter abrufen und je nach Status der übergeordneten Anwendung unterschiedliche Verarbeitungen durchführen.
2) Initialisieren Sie das DOM-Objekt, das die Unteranwendung bereitstellen muss.
Es gibt viele Konfigurationen und Methoden, um dom zu initialisieren, und el wird von vielen Konfigurationselementen erhalten.Der Code ist relativ einfach, daher werde ich hier nicht ins Detail gehen. Nur die Priorität des Werts wird zu Ihrer Information aufgeführt.
appOptions.el > props.domElement > props.name
Nachdem der Dom-Knoten formatiert ist, beginnt das Folgende mit dem Mounten der Seite auf dem Dom.
3) Erstellen Sie ein vue-Beispiel und montieren Sie es auf der Seite
Vor dem Laden der Seite gibt es ein Konfigurationselement: replaceMode, das Konfigurationselement replaceMode wird verwendet, um festzustellen, ob der Inhalt unter dem el-Knoten ersetzt werden muss. Wenn der Standard-replaceMode falsch ist, wird ein leeres div mit der Klasse single-spa-container unter dem el-Knoten erstellt, um die Unteranwendung zu speichern.
Nehmen Sie den Code in der Demo als Beispiel:
Wenn der Standard-replaceMode falsch ist, werden der Inhalt in der Basis und der Inhalt in vue1 koexistieren. Wie nachfolgend dargestellt:
Wenn Sie replaceMode auf true ändern, werden Sie feststellen, dass der Inhalt in der Basis durch den Inhalt in vue1 überschrieben wird.
Wie nachfolgend dargestellt:
Beginnen Sie nach dem Festlegen der Montagemethode damit, die Unteranwendung tatsächlich auf dem Dom zu montieren.
Hier werden zwei Mount-Methoden unterstützt, eine ist das Mounten mit der createApp-Methode von vue3 und die andere ist das Mounten mit der neuen Vue-Methode von vue2. Die Montagemethode hier ist eigentlich die gleiche wie unsere Konfiguration der Verwendung von vue zum Mounten auf dom.
Durch die obigen Schritte wird die Unteranwendung nun auf der Dom in der HTML-Seite gemountet.
5.5 Lebenszyklusfunktion aktualisieren: aktualisieren
Beim Aufruf von packet.update() wird die Update-Methode ausgelöst, da der Autor das Advanced-Feature-Paket nicht verwendet, werde ich es hier nicht vorstellen.
5.6 Lebenszyklus der Deinstallation von Unteranwendungen: unmounten
Wenn sich die Seiten-URL ändert, wird die Unmount-Methode ausgelöst, wenn die Seitenroute der Unteranwendung verlassen wird.
Die wichtigsten Dinge, die bei der Unmount-Methode zu tun sind, sind:
- Vue-Anwendung deinstallieren
- vue-Instanz löschen
- Löschen Sie gleichzeitig den Seitendom.
Nach Durchführung des Unmount-Vorgangs werden die Daten und der Dom der Unteranwendung gelöscht.
5.7 Zusammenfassung
Das Obige ist der gesamte Prozess des Mountens von Unteranwendungen mit der Single-Spa-Vue-Funktionsbibliothek, die offiziell von Single-Spa bereitgestellt wird. Durch die obige Analyse haben wir festgestellt, dass die Single-Spa-Vue-Funktionsbibliothek ein Objekt zurückgibt, das vier Methoden für Bootstrap, Mount, Update und Unmount enthält, indem die SingleSpaVue-Methode aufgerufen wird. Die entsprechende Methode wird im Lebenszyklus des Ladens von Unteranwendungen in der Basisanwendung ausgeführt, und die Unteranwendung wird in die Basisanwendung eingehängt oder durch die Ausführungsmethode aus der Basisanwendung entfernt.
Durch den Prozess des Ladens von Unteranwendungen in Single-Spa-Vue fügt Single-Spa jede Unteranwendung zu einer komplexen Anwendung zusammen und verwaltet jede Unteranwendung separat, ohne dass der Benutzer dies bemerkt.
Wenn Single-Spa Unteranwendungen lädt, gibt es neben der vue-Version noch andere Versionen, aber die Ladeidee ist ähnlich. Sie werden alle in die HTML-Datei in der Funktionsbibliothek geladen, und keine anderen werden hier vorgestellt.
single-spa Andere Möglichkeiten zum Laden von Unteranwendungen: single-spa-react, single-spa-html
6 Beibehaltung des Status der Unteranwendung
Im eigentlichen Entwicklungsprozess ist der Autor auf einige Seiten gestoßen, die Keep-alive in vue verwenden müssen, um den Zustand zu erhalten. Obwohl die Seite während des Seitenwechselprozesses zerstört wird, muss der Seitenzustand beibehalten werden, aber wir analysieren Einzel- spa-vue Wenn die Unmount-Methode implementiert wird, wird festgestellt, dass beim Wechseln der Seite die Unteranwendung und die vue-Instanz zerstört werden und das Keep-Alive in der Unteranwendung zu diesem Zeitpunkt nicht wirksam wird.
Wie nachfolgend dargestellt:
Nach der Eingabe des Inhalts in die Eingabe kann das traditionelle Spa-Projekt den Status durch Keep-Alive aufzeichnen und beim Umschalten der Seitenroute zurückschalten und den Status dennoch beibehalten. Wenn Sie jedoch single-spa-vue direkt verwenden, wird der Eingabeinhalt 1111 in input gelöscht, wenn die Unteranwendung das Unmounten auslöst. Als Reaktion auf diese Situation hat der Autor einige Änderungen an der Single-Spa-Vue-Klassenbibliothek vorgenommen.
Der Änderungsinhalt ist wie folgt:
6.1 Sub-App von zerstört auf versteckt geändert
Ein Konfigurationselement wird zu dem Single-Spa-Vue-Konfigurationselement hinzugefügt.Je nachdem, ob es ein isKeepAlive-Konfigurationselement in dem Konfigurationselement gibt,wird beurteilt, ob das aktuelle Dom versteckt oder gelöscht werden soll. Auf diese Weise wird beim Auslösen des Unmount-Verfahrens der Unteranwendung die Unteranwendung nicht gelöscht, sondern bleibt erhalten.
Gleichzeitig hat der Autor auch einige Optimierungen an der Routenkonfiguration von vue vorgenommen: Wenn die Seite nicht existiert, wird zu diesem Zeitpunkt eine leere Komponente in der Unteranwendung auf dem Dom gemountet, um dies jedoch zu vermeiden Die Seite ist versteckt, der Dom befindet sich immer noch in der HTML-Datei, was zu zu viel Seiten-Dom führt.
6.2 Unteranwendung von neu auf Anzeige geändert
Wenn die mount-Methode im single-spa-vue-Konfigurationselement aufgerufen wird, um die Unteranwendung zu mounten, wird beurteilt, ob die aktuelle Unteranwendung existiert. Wenn die Unteranwendung existiert, wird die Unterseite direkt angezeigt. Seit die Teilapplikation wurde nicht vernichtet, zu diesem Zeitpunkt die Teilapplikation Das Keep-alive in der Applikation greift immer und speichert den Zustand der Seite.
Durch die Optimierung der Mount- und Unmount-Methoden der Single-Spa-Vue-Klassenbibliothek kann der Benutzer die Seite wirklich so reibungslos wie bei der Verwendung von Vue verwenden und den Seitenstatus beibehalten, um die Benutzererfahrung zu verbessern.