Ein bemerkenswertes Feature, das angular2 bietet, 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 behandeln.
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. Wendet man dieses Konzept auf unser Angular-Projekt an, ergibt sich folgende Struktur: Ein Projekt, das in Module unterteilt ist (z. B. app.Modul.ts), in dem unter anderem folgende Teile zu definieren sind:
- Die Komponenten, die wir verwenden werden (Deklarationen)
- Die Module, von denen ich Komponenten verwenden werde (Importe)
- Die Dienste, die ich brauche (Anbieter)
- …
Nun, wenn wir dies klar haben, wissen wir bereits, dass ein Modul ein Paket ist, das alle definierten Funktionen hat. Dieser Linie folgend wäre es beispielsweise notwendig, die Funktionalität eines Projekts in kleine Teile zu unterteilen:
Admin-Benutzermodul
- Statistikmodul
- Gemeinsames Modul
- Benutzerkomponente
- Komponentenmetriken
- …
Client-Benutzer-Modul
- Gemeinsames Modul
- Freunde-Komponente
- Komponentenfotos
- Komponente Meine Wand
- …
Statistikmodul
- Komponentenstatusdiagramme
- Komponentensuchdiagramme
- Diagramme der aktiven Komponentenzeit
- …
Gemeinsames Modul
- Navigationskomponente
- Login-Komponente
- …
Ein wichtiger Teil des obigen Beispiels ist, dass ein Modul wiederum andere Module enthalten kann. Im Übrigen erkennen wir bereits, 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?, nur die notwendigen Module werden in dem Moment geladen, in dem wir sie brauchen, d.h.:
Wenn ich mich als Administratorbenutzer anmelde, werden nur die Komponenten des Administratormoduls geladen, weder die Benutzerkomponenten noch die Komponenten der Statistik, sondern nur die Komponenten des Administratorbenutzers.
Wenn ich mich als Administrator bei statistics anmelde, werden alle Komponenten des Statistikmoduls geladen.
So einfach ist das, dadurch wird das Webprojekt davon befreit, alle Dateien zu Beginn hochzuladen, was uns ein flüssigeres Gefühl vermittelt, als wenn wir am Anfang alles hochladen würden. Worüber wir gesprochen haben, führt uns jedoch zur nächsten Frage.
Brauche ich es in meinem Projekt?
Hier ist es nur notwendig, mit dem vor Ihnen liegenden Projekt konsistent zu sein, Lazyloading wird bemerkt, wenn das Volumen des Projekts groß ist, es ist jedoch in kleinen Projekten nicht problematisch. Um diese Frage zu beantworten, müssen Sie sich folgende Fragen stellen
Hat mein Projekt Erwartungen, groß zu sein?
- Wenn Sie ein großes und stabiles Projekt wünschen, integrieren Sie Lazyloading ohne Zweifel, denken Sie nicht einmal darüber nach.
Mein Projekt wird im Moment nicht groß sein, brauche ich es?
- Beachten Sie Folgendes: Wenn das Projekt in Zukunft groß ist und wir möchten, dass es stabil bleibt, muss Lazyloading integriert werden, und es wird nicht einfach sein, den Code so umzustrukturieren, dass er in Module unterteilt wird, die in einigen Fällen nicht durchführbar sind.
Habe ich die Zeit, eine separate Struktur in Modulen einzurichten und zu erstellen?
- Die Realität ist, dass es nicht viel Zeit in Anspruch nimmt, wenn Sie von Anfang an damit beginnen, das verzögerte Laden von Modulen zu konfigurieren, ist keine große Komplikation oder beeinträchtigt die Arbeit.
Wie richte ich es ein?
Ich hoffe, dass Sie sich an dieser Stelle davon überzeugt haben, dass die Integration 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 für das verzögerte Laden von Modulen konfigurieren.
Das erste ist, so viele Module wie möglich mit dem Befehl zu generieren ng Modul generieren $modulname, als die Teile, die Sie in Ihrem Projekt identifizieren, werden wir für diese Demo die folgende Modulstruktur verwenden:
- App
- Adminbereich
- Stats
- Client
- Gemeinsame Komponenten
Mit folgender Ladehierarchie:
App-Modul
- Import – CommonComponentsModule
- Lazyload – Adminmodul
- Lazyload – Clientmodul
Adminmodul
- Import – CommonComponentsModule
- Lazyload – StatsModule
Clientmodul
- 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:
Nun, wie im vorherigen Beispiel zu sehen ist, erfolgt die Konfiguration des Lazyloading durch Konfigurieren von Routen, indem auf das Modul mit der Eigenschaft ‘loadChildren’ verwiesen wird. Auf diese Weise delegieren wir bereits die Verwaltung von Komponenten an die Admin- und Client-Module, 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 innerhalb 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, bisher keine Komplikationen, oder?
Nun, so weit die Konfiguration der Module und jetzt bleibt nur noch zu gehen … entwickeln Sie unser Projekt, lazyloading hat keine Konfigurationen mehr! Großartig, nicht wahr? Nun, uns fehlt nur eine Sache, eine Sache, Woher wissen wir, ob ein Modul träge geladen wird? Sehr einfach
Die Überprüfung würde wie folgt durchgeführt: Wir gehen zum Browser, öffnen auf der Hauptseite den Elementinspektor und gehen dort zur dritten Registerkarte ‘Quellen’, wir sollten so etwas haben:
Wenn wir jetzt zum Beispiel zu admin gehen, werden wir die folgende Änderung beobachten:
Wie Sie sehen, wurde eine neue Datei namens hinzugefügt administrator.Modul.Brocken.js welches enthält alle Komponenten, Dienstleistungen, … definiert im Admin-Modul, separat, wurde erst geladen, wenn wir nicht zu diesem Pfad navigiert sind. Wenn wir den Pfad zum Beispiel in client ändern würden, hätten wir eine neue Datei namens Client.Modul.Brocken.js mit den in diesem Modul definierten Inhalten.
Zusammenfassend eine großartige Möglichkeit, ein Projekt zu segmentieren und die Auslastung zu kontrollieren
