Vorne schreiben
Vor kurzem bin ich auf einige Inhalte in eckigen modularen Verpackungen bei der Arbeit gestoßen. Ich hatte das Gefühl, dass ich einige Fallstricke in der Mitte hatte, also markierte ich es hier.
Projekthintergrund:
Das Projekt verwendet hauptsächlich AngularJs als Front-End-Framework. Als das Projekt zuvor veröffentlicht wurde, wurden alle Front-End-Skripte verpackt und in eine Datei komprimiert. Es wird geladen, wenn die Seite zum ersten Mal zugegriffen wird, was zum langsamen Laden der Seite führt. Auf dieser Basis wird vorgeschlagen, bei Bedarf zu laden, dh die Skripte des Moduls werden nur geladen, wenn der Benutzer auf ein bestimmtes Modul zugreift.
Werkzeuge:
Das Projekt verwendet die Grunzverpackung gemäß den AMD-Spezifikationen, verwendet Grunzen-Contrib-RequireJs, um Module zu komprimieren und zu verschmelzen und Oclazyload zu vervollständigen, um das faule Laden des Winkelmoduls zu vervollständigen.
Projektprozess:
Modulverpackung
Der Code im Projekt ist im Grunde genommen in Übereinstimmung mit der AMD-Spezifikation geschrieben, und Grunzen-Contrib-RequireJS wird verwendet, um jedes Modul in eine JS-Datei zu komprimieren.
FRAGE 1: Im Projektcode stützt sich jedes Modul auf Bibliotheken/öffentlichen Dienste von Drittanbietern in den Projekt-/öffentlichen Anweisungen im Projekt. Wenn dieser Teil des Inhalts nicht verarbeitet wird, lädt Grunzen-Contrib-RequireJs alle Module, von denen er beim Komprimieren jedes Moduls abhängt und ihn dann in dieselbe JS-Datei komprimiert.
Antwort: Komprimieren Sie die Bibliothek/öffentliche Dienste und Anweisungen von Drittanbietern in drei Module und entfernen Sie sie dann mit "ausschließen" aus dem Verpackungsskript jedes Moduls. Wie in der Abbildung unten gezeigt:
Es ist zu beachten, dass der Modulname des öffentlichen Moduls eine JS -Datei mit demselben Namen unter dem entsprechenden Pfad haben muss.
Last bei Bedarf
Nach dem Verpacken des Skripts in JS -Dateien per Modul wird im nächsten Schritt verschiedene Module gemäß den Benutzeranforderungen geladen. Das Projekt verwendet UI-Router, um Routing-Sprünge zu bewältigen. Sie können von der Route beginnen, um das faule Laden von Modulen zu vervollständigen.
Die spezifische Methode lautet: Wenn der Benutzer den Routensprung bedient, wird das Modul, zu dem der Benutzer gehört, entsprechend dem Status geladen, zu dem der Benutzer springen möchte. Basierend darauf muss eine Zuordnung zwischen dem Zustand und dem Modul hinzugefügt werden. Am Anfang ist es notwendig, es mit Anforderungen zu laden. Es wurde festgestellt, dass das Skript geladen werden kann, die in Angular registrierten Controller/Dienste/Filter nicht funktionieren. Die Untersuchung ergab, dass Dienste wie Controller, die nach dem Aufrufen der Bootstrap -Methode von Angular registriert sind, nicht erneut aufgerufen werden. Basierend darauf wird Oclazyload in das Laden eingeführt (Oclazyload hat einige Einspritzungen und Modifikationen am Winkelquellcode).
Bisher wurde die Lade auf Bedarf im Grunde genommen umgesetzt, aber es gibt noch einige Probleme:
Projektabhängigkeiten zwischen Modulen
Da es zwischen den Projekten zwischen einigen Modulen starke Abhängigkeiten gibt, besteht die Verarbeitung darin, Abhängigkeiten zwischen Modulen in der Konfigurationsdatei hinzuzufügen. Überprüfen Sie vor dem Laden eines Moduls, ob es über ein abhängiges Modul verfügt. In diesem Fall wird das abhängige Modul zuerst geladen. Nach dem Laden des abhängigen Moduls wird das Strommodul geladen.
Fauler Laden von Anweisungen;
In Angular kann $ Compile verwendet werden, um die gegenseitige Abhängigkeit zwischen den Anweisungen zu implementieren. Die Verarbeitung davon besteht darin, den Anweisungsnamen und die Abhängigkeit des Befehlsmoduls zu konfigurieren. Wenn eine bestimmte Anweisung verwendet wird, wird das Modul zuerst geladen und dann die Kompilierungsmethode ausgeführt. Diese Lösung kann die meisten Anweisungsabhängigkeiten lösen.
Die Lage der Anweisungen. Die meisten Projekte verwenden lange Seiten, jede lange Seite ist in mehrere Bereiche unterteilt, und jeder Bereich ist ein Befehl. Es wird ein Problem bei der Verwendung von Abfangen geben, dh die Ladezeit der einzelnen Anweisungen ist unterschiedlich. Die Befehle, die zuerst zurückkommen, werden zuerst an DOM angehängt, was zu Unsicherheiten im Seitenlayout führt. Die Lösung besteht darin, den Deffer -Mechanismus zu verwenden und nach allen Anweisungen geladen/kompiliert, die Ausführung in den DOM -Baum hinzuzufügen.
Abhängigkeiten zwischen Richtlinien: Es gibt auch Projektabhängigkeiten zwischen den Richtlinien. Die Lösung hierfür besteht darin, interdependente Anweisungen in ein Modul zusammenzuführen und sie in dieselbe Skriptdatei zu verpacken. Diese Lösung kann die meisten Anweisungsabhängigkeiten lösen, kann jedoch die Abhängigkeiten während des Initialisierungsprozesses nicht lösen. Möglicherweise wird eine bestimmte Anweisung erstellt, und die Abhängigkeiten von der Anweisung wurden noch nicht zusammengestellt. Für ein solches besonders spezielles Beispiel werden nur das Skript und die Vorlage geladen, wenn die Seite initialisiert wird.
Die oben genannten sind die Probleme, die während des gesamten Projektprozesses auftreten. Grundsätzlich treten Sie jedes Mal, wenn Sie vorwärts gehen, auf eine Grube. Viele Dinge sind das erste Mal, dass Sie mit ihnen in Kontakt kommen, und ich habe das Gefühl, dass ich etwas gelernt habe. Die Lösungen für viele Probleme sind möglicherweise nicht sehr klar. Andere sind auf alle oben genannten Probleme gestoßen. Solange Sie die Suchmaschine gut verwenden und selbst den Code anderer Personen lesen/verstehen, können alle Probleme erfolgreich gelöst werden.
Einige Fallstricke über eckig faules Laden sind der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.