webentwicklung-frage-antwort-db.com.de

Angular Modul mit mehreren Komponenten wird langsam geladen

Freunde.

Ich habe ein Szenario gefunden, das die Initiierung meines Moduls in Angular 2 verzögert. Dies ist mein erstes Projekt. Ich wusste nicht, wie man mit diesem Szenario umgehen sollte. Bitte alle, die mir das erklären können.

Szenario: -
Ich habe eine kleine Anwendung erstellt, in der verschiedene Module vorhanden sind. Jedes Modul hat 2-3 Unterkomponenten. Mein SignUp-Modul und mein MyAccount-Modul ist jedoch eine Mischung aus verschiedenen Komponenten. 

Nachfolgend finden Sie die Hierarchie meiner Bewerbung. 

app
--Vorderes Ende
---- videos
------Detail
-------- videodetail.component.html
-------- videodetail.component.ts
------Liste
-------- list.component.html
-------- list.component.ts
------ videos.component.html
------ videos.component.ts
------ videos.routing.ts
------ videos.module.ts
----Artikel
------ article.component.html
------ article.component.ts
---- front-end.routing.ts
---- front-end.module.ts
---- Frontend.Komponente.ts
---- Frontend.component.html
--Anmelden
----Schritt eins
------ stepone.component.html
------ stepone.component.ts
----Schritt zwei
------ steptwo.component.html
------ steptwo.component.ts
----Schritt drei
------ stepthree.component.html
------ stepthree.component.ts
----Schritt vier
------ stepfour.component.html
------ stepfour.component.ts
----Finale
------ final.component.html
------ final.component.ts
----Einer noch
------ onemore.component.html
------ onemore.component.ts
---- signup.module.ts
---- signup.component.ts
---- signup.routing.ts
---- signup.component.html app.module.ts app.component.ts app.component.html app.routing.ts

Unten ist der signup-routing.module.ts-Routing-Code für untergeordnete Objekte.

const routes: Routes = [
    { path: '', component: SignupComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }

Wie unten angegeben, ist der Konstruktor von SingupComponent und Basecomponent

export class BaseComponent implements OnInit  {
    public SiteConfigurations: SiteConfigurations;
    public options: any
    constructor() {
        this.SiteConfigurations = new SiteConfigurations();
        var currentClass= this;
        window["SetDefaultImage"] = function(){}
        window["SetDefaultImage"]=function (event){
          currentClass.SetDefaultImageWithCurrentClass(event,currentClass);
        };
    }

    ngOnInit() {
      //  this.options = Baser
    }

    SetDefaultImageWithCurrentClass(event,currentClass) {
        event.target.src = currentClass.SiteConfigurations.EnvironmentConfigurations.siteURL+"assets/images/no-image.png";
    }
    SetDefaultImage(event) {
      this.SetDefaultImageWithCurrentClass(event,this);
    }
}

export class SignupComponent extends BaseComponent implements OnInit, OnDestroy {
constructor(router: Router, accountService: AccountService) {
    super();
    this.accountService = accountService;
    this.router = router; }

    ngOnInit(): void {
        this.packageType = this.getStepData("packageType");
        this.stepone = this.getStepData("stepone");
        this.steptwo = this.getStepData("steptwo");

        this.options = this.accountService.notificationService.options;
        this.clear = true;
    }
}

Unten ist mein app-routing.module.ts-Code

const routes: Routes = [
    {
        path: '', component: FrontEndComponent,
        children: [
        { path: 'home', loadChildren: './home/home.module#HomeModule' },
        { path: 'videos', loadChildren: './videos/videos.module#VideosModule' },
        { path: 'myaccount', loadChildren: './users/users.module#UsersModule', canActivate: [AuthGuard] },
        { path: 'signup', loadChildren: '../signup/signup.module#SignupModule' }]   
    } 
];

Wenn ich meine Anwendungs-Homepage starte, wird sie geladen. Wenn ich zum ersten Mal auf SignUp klicke, dauert es einige Zeit, bis der Konstruktor von signup.component.ts .__ ausgeführt wird. Der Grund, den ich gefunden habe, ist im Anmelde-Modul Komponente, die geladen wird, wenn das Anmeldemodul zum ersten Mal aufgerufen wird (dh wenn die Chunk-Datei generiert wird). Das gleiche Problem besteht beim AccountModule, bei dem etwa 8 bis 10 Unterkomponenten verwendet werden, um Daten im Dashboard für Benutzerkonten anzuzeigen.

Es dauert einige 2-3 Sekunden, bevor der Konstruktor und die onInit-Methode der SignUp-Komponente aufgerufen werden, und gehen Sie auf die Serverseite, um Daten aus der Datenbank zu übernehmen .. _, während andere Module wie Videos, Artikel und andere nur 2 und maximal 3 haben Unterkomponente und sie werden sofort ausgeführt. 

Jeder, der sich mit dem genauen Verhalten von Modul/Komponente und deren Rendering auskennt, kann mir helfen, dieses Problem zu lösen. Korrigieren Sie mich, wenn ich irgendwo falsch liege, oder lassen Sie mich wissen, wenn ich irgendwelche Informationen vermisse, um sie besser zu beschreiben. 

Neugierig auf den Grund und die Lösung, um mehr über Angular zu erfahren 

10

herauszufinden, was in Ihrer Anwendung falsch ist, ohne auf die Codebase zuzugreifen, ist nicht einfach, aber ich versuche es mit einem guten Rat, der Ihnen helfen könnte.

Verwenden Sie @ angle/cli

Ich habe viele Leute gekannt, die die Verwendung eines Build-Tools abgelehnt haben, da Webpack bei richtiger Konfiguration bereits Optimierungen und Verbesserungen durchführen kann. Diese Leute können sich jedoch nicht vorstellen, wie mächtig dieser Befehl ist:

ng build --prod

Es wird:

  1. Kompilieren Sie Ihren Code Ahead Of Time (AOT)
  2. Setzen Sie das Flag production
  3. Hash den Namen der Dateien (um das Caching zu verhindern)
  4. Produziere keine Quellcaps
  5. Optimieren Sie Ihren Code (von Angular 5)
  6. Führen Sie UglifyJS für den Code aus

Wenn Sie also @ angle/cli nicht verwenden, können Sie es verwenden. Wenn Sie es verwenden, aber Ihre Version immer noch nicht aktualisiert haben, aktualisieren Sie sie.

Verwenden Sie den Quellkarten-Explorer

source-map-Explorer ist ein Tool, mit dem Sie wissen können, woher das Gewicht Ihrer Dateien kommt. Vielleicht haben Sie eine ganze Bibliothek importiert, aber nur wenige Funktionen benötigt? Sie können es mit diesem Tool entdecken.

Chrome ist dein Freund

Ein weiteres leistungsstarkes Werkzeug, das häufig ignoriert wird, ist das Chrome Developer Tool. Sie müssen nichts installieren, drücken Sie einfach F12, klicken Sie auf die Registerkarte Performance und starten Sie die Profilerstellung .

Vielleicht haben Sie eine starke Synchronisierungsfunktion verwendet, die die gesamte Anwendung verlangsamt? Vielleicht gibt es eine Funktion, die einer Optimierung bedarf? Sie können es entdecken, nachdem Sie Ihr Profil erstellt haben, können Sie sehen, wo Ihre Anwendung mehr Zeit benötigt. Wenn Sie auf die Registerkarte Aufrufbaum klicken, können Sie herausfinden, wie der Name dieser Funktion lautet und was die Quelle ist.

Für ähnliche Zwecke können Sie auch webpagetest.org überprüfen.

Verwenden Sie einen Service-Mitarbeiter

Ein bekannter Weg, Ihre Anwendung zu beschleunigen, ist die Verwendung eines Service-Arbeiters. Sie können einen interessanten Artikel lesen, indem Sie auf hier klicken.

Die Idee ist, das PRPL-Muster auf Angular anzuwenden (ein Muster, das darauf abzielt, die Analyse und Ausführung zu optimieren, um durch aggressive Code-Aufteilung und Zwischenspeicherung Interaktivität in niedrigen Zeiten zu erreichen).

Ich hoffe, einige meiner Hinweise könnten Sie in die richtige Richtung führen. Lass es mich wissen

3

Wenn Sie der Meinung sind, dass Ihre App aufgrund einer großen Anzahl von Komponenten langsamer wird. Möglicherweise müssen Sie in Angular faul laden.

Faules Laden in Aktion

Das obige ist eine kleine, faul geladene Komponente, die ich für meine App entwickelt habe.

Durch Lazy-Loading-Module verkürzen wir die Startzeit. Mit faul Beim Laden unserer Anwendung muss nicht alles auf einmal geladen werden. Es muss nur das geladen werden, was der Benutzer erwartet, wenn die App zuerst angezeigt wird Ladungen. Module, die träge geladen werden, werden nur geladen, wenn die Benutzer navigiert zu ihren Routen.

Weitere Informationen zur Verwendung von Lazy Loading Credits - https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

1
Rahul Singh

Bitte lesen und verstehen Sie das kantige Lazy Loading. Die folgenden Links können Ihnen helfen, Ihr Problem zu lösen. 

https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-drei-stufen

https://medium.com/@leekp/lazy-loading-with-angular-4-29c23792b7f4

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Wie ich sehen kann, hat Ihre Lösung für jedes Modul ein Routing. Sie müssen sie wie folgt auf app-routing.module.ts laden 

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'signup', loadChildren: 'sighup/sighup.module#SignUpModule' },
  { path: 'front-end', loadChildren: 'front-end/front-end.module#FrontEndModule' },

];

Dies verhindert die Ausführung anderer Module beim Aufruf des Anmeldemoduls.

Das Anmelde-Routing kann sich auch wie folgt ändern. (hängt von Ihrer Bewerbung ab)

const routes: Routes = [
    { path: '', component: SignupComponent },
children: [
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }
]
}

auch für das Anmeldemodul in signup.components.html eingestellt. 

1