Angular 7 loading the after login component very slowly

Question

The load of the after login component in my angular 7 application is so slow, the first time a user login to the app. But if he logout and login back again without closing the browser, the speed would be better.

The routing tree is like the following:

On startup of the app, we have the login component;
When the user log in, he will be redirected to dashboard component which contain a lazy load module as the following:

{ path:'', component: DashboardComponent, children: [ { path:'', component: HomeComponent
}, { path: 'home', loadChildren: './main-navbar/main-navbar.module#MainNavbarModule' }, { path: 'registration', loadChildren: './registration/registration.module#RegistrationModule' }, { path: 'admin', loadChildren: './admin/admin.module#AdminModule' } ] },

And the html of this component is:

<app-main-navbar></app-main-navbar>

The <<app-main-navbar> is a component having the <mat-sidenav> and <mat-toolbar>, in which, it contain the <router-outlet></router-outlet>

At both dashboard and main navbar components, I've added the following to check the execution time of component:

Constructor

//MainNvabar Component
let time = performance.now();
console.log("mainNavbar constr");
console.log("mainNavbatr Constructor time: "+time)

//Dashboard Component
let time = performance.now();
console.log("dashboard constructor");
console.log("dashboard constructor: "+time)

ngOnInit

//MainNavbar
let time = performance.now();
console.log("mainNavbar constr");
console.log("mainNavbatr Constructor time: "+time)

//ngOnInit
let time = performance.now();
console.log("mainNav ngOninit");
console.log("mainNavbatr ngOnInit time: "+time)

The result was:

dashboard constructor

dashboard constructor: 10545.69999999967

mainNavbar constr mainNavbatr

Constructor time: 10582.699999999932

dashboard constructor

dashboard ngOnInit: 10622.000000000298

mainNav ngOninit

mainNavbatr ngOnInit time: 10624.2000000002

With a warning saying:

[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

Bv Kay Bv Kay · Accepted Answer · 2018-12-10T15:13:18

The first time you login and get redirected inside the app, the MainNavBarModule (or whichever module your default redirection screen is hosted on) has to be downloaded and that explains the extra load time.

On subsequent loads of the page (an example of which being logout and login again), the module is cached within your browser, hence the load is fast.

This is the default behavior of lazy loading.

You can monitor this in the Network tab within Developer Tools of your browser, filtering only for XHR requests.

Angular 7 loading the after login component very slowly

1 Answers