Ein bemerkenswertes Merkmal von angular2 ist Lazyloading, aber was ist Lazyloading? Und noch wichtiger, brauche ich es in meinem Projekt? und wenn ja, wie richte ich es ein? Diese 3 Fragen werden wir in diesem Beitrag diskutieren.
Was ist lazyloading?
Es wird als “Verzögertes Laden” bezeichnet und reagiert auf ein Entwurfsmuster, das auf der Verzögerung des Ladens oder der Initialisierung eines Objekts basiert. Wenn wir dieses Konzept auf unser Angular-Projekt anwenden, entsteht folgende Struktur: Ein separates Projekt in Modulen (zB: app.Modul.ts), in denen unter anderem folgende Teile zu definieren sind::
- Die Komponenten, die wir verwenden werden (Deklarationen)
- Die Module, für die ich Komponenten verwenden werde (Importe)
- Die Dienste, die ich brauche (Anbieter)
- …
Nun, da dies klar ist, wissen wir bereits, dass ein Modul ein Paket mit einer ganzen Reihe von Funktionen ist. Nach dieser Zeile sollte die Funktionalität eines Projekts in kleine Teile unterteilt werden, zum Beispiel:
Admin-Benutzer-Modul
- Modul Statistik
- Gemeinsames Modul
- Benutzerkomponente
- Metrische Komponente
- …
Kunden-Benutzer-Modul
- Gemeinsames Modul
- Freunde-Komponente
- Komponente Fotos
- Meine Wandkomponente
- …
Modul Statistik
- Statusdiagramme Komponente
- Grafikkomponente suchen
- Komponente Aktive Zeitdiagramme
- …
Gemeinsames Modul
- Navigationskomponente
- Login-Komponente
- …
Ein wichtiger Teil des obigen Beispiels ist, dass ein Modul auch andere Module enthalten kann. In Bezug auf den Rest stellen wir bereits fest, dass wir von Anfang an über die folgende Struktur nachdenken müssen, da dies eine sehr spezifische Art der Organisation unseres Codes impliziert.
Wenn man das weiß, scheint die Idee des Lazyloading bereits klarer zu werden, oder?, werden nur die notwendigen Module geladen, wenn wir sie benötigen, d.h.:
Wenn ich als Administratorbenutzer eingebe, werden nur die Komponenten des Administratormoduls geladen, weder die Benutzerkomponenten noch die Statistikkomponenten, nur die Komponenten des Administratorbenutzers.
Wenn ich als Administrator Statistiken eingebe, werden alle Komponenten des Statistikmoduls geladen.
So einfach wie das, befreit dies das Webprojekt vom Laden aller Dateien am Anfang, was uns ein flüssigeres Gefühl gibt, als wenn wir alles am Anfang laden. Worüber wir jedoch gesprochen haben, bringt uns zur nächsten Frage.
Brauche ich es in meinem Projekt?
Hier können Sie nur mit dem Projekt übereinstimmen, das Sie vor sich haben, Lazyloading beginnt zu bemerken, wenn das Volumen des Projekts groß ist, ist jedoch in kleinen Projekten nicht problematisch. Um diese Frage zu beantworten, müssen Sie sich folgende Fragen stellen
Hat mein Projekt Erwartungen, großartig zu sein?
- Wenn Sie ein großes und stabiles Projekt wünschen, integrieren Sie Lazyloading ohne Zweifel oder denken Sie darüber nach.
Mein Projekt wird vorerst nicht groß sein. Brauche ich es?
- Beachten Sie Folgendes: Wenn das Projekt in Zukunft groß ist und stabil bleiben soll, müssen wir Lazyloading integrieren und es wird nicht einfach sein, den Code so umzustrukturieren, dass er in Module aufgeteilt wird, die in einigen Fällen nicht rentabel sind.
Habe ich die Zeit zu konfigurieren und eine separate Struktur in Modulen?
- Die Realität ist, dass es nicht viel Zeit in Anspruch nimmt, wenn Sie von Anfang an damit beginnen, da das verzögerte Laden von Modulen keine große Komplikation darstellt oder die Arbeit beeinträchtigt.
Wie richte ich es ein?
Ich hoffe, dass Sie sich an dieser Stelle davon überzeugt haben, dass die Einbeziehung von Lazyloading eine gute Idee ist und dass Sie bereits darüber nachdenken, wie Sie es in Ihr Projekt integrieren können. In diesem Teil erfahren Sie, wie Sie ein Projekt so konfigurieren, dass Module verzögert geladen werden.
Das erste ist, so viele Module mit dem Befehl zu generieren ng generieren Modul $Modul-namewie die Teile, die Sie in Ihrem Projekt identifizieren, verwenden wir für diese Demo die folgende Modulstruktur:
- App
- Admin
- Stats
- Client
- Gemeinsame Komponenten
Mit dem folgenden Last-Hierarchie:
AppModule
- Import-CommonComponentsModule
- Lazyload-AdminModule
- Lazyload-ClientModule
AdminModule
- Import-CommonComponentsModule
- Lazyload-StatsModule
ClientModule
- Import-CommonComponentsModule
Nun, wie stellen wir das in unserem Projekt dar? Das erste ist, zum höchsten Modul zu gehen, in diesem Fall AppModule und es sollte so aussehen:
Wie im obigen Beispiel gezeigt, erfolgt die Lazyloading-Konfiguration durch Konfigurieren von Pfaden, indem mit der Eigenschaft “loadChildren” auf das Modul verwiesen wird. Auf diese Weise delegieren wir bereits in den Admin-und Clientmodulen die Verwaltung von Komponenten, dh die delegierten Module kümmern sich bereits um die Verwaltung ihrer eigenen Komponenten und ihrer Routen.
Gehen wir nun zu AdminModule, unserem nächsten Modul in dieser Hierarchie, mal sehen, wie es aussieht
Wie wir sehen können, sind die Konfigurationen denen in AppModule sehr ähnlich, wir laden die benötigten Komponenten und delegieren die Module, die wir laden möchten, auf faule Weise Ohne Komplikationen.
Nun, so weit die Konfiguration von Modulen und jetzt bleibt es nur noch zu bewegen … entwickeln Sie unser Projekt, Lazyloading hat keine Konfigurationen mehr! Toll, nicht wahr? Nun, uns fehlt nur eine Sache, eine Sache. Woher wissen wir, ob ein Modul auf faule Weise geladen wird? Sehr einfach
Die Überprüfung würde auf folgende Weise erfolgen, wir gehen zum Browser, auf der Hauptseite öffnen wir den Elements Inspector und sobald wir dort zur dritten Registerkarte ‘Quellen’ gehen, sollten wir so etwas haben:
Wenn wir uns jetzt beispielsweise an admin wenden, werden wir folgende Änderung beobachten:
Wie Sie sehen können, eine neue Datei namens admin.Modul.Brocken.js welche enthält alle Komponenten, Dienstleistungen,… definiert im Admin-Modul, separat, wurde nicht geladen, bis wir nicht zu dieser Route navigiert haben. Wenn wir beispielsweise den Pfad zum Client ändern, wird eine neue Datei namens Client.Modul.Brocken.js mit den in diesem Modul definierten Inhalten.
Abschließend eine hervorragende Möglichkeit, ein Projekt zu segmentieren und die Last zu steuern
