First visit page load in my solution in Azure is very slow #6567

affern created 5 years ago

Hello guys.

My Asp.Net Zero solution, https://www.votecha.com has Angular 4 as a client app and run in Azure. But on first time visits the page load very slow.

I have developed a public modul after the same pattern as the account module. In the code the public module is set to lazy load like the account module.

I wonder if you have any tips on how I can reduce "the first visit" response time? Should I try to preload the public module? If so, how can I do this? Or is there other solutions I should try?

I know I can optimize my queries and also use Azure Redis cache, but it is mainly the first visit loading that is the problem.

This is my code in root-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router, NavigationEnd } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: '/app/main/mysite', pathMatch: 'full' },
    {
        path: 'account',
        loadChildren: 'account/account.module#AccountModule', //Lazy load account module
        data: { preload: true }
    },
    {
        path: 'public',
        loadChildren: 'public/public.module#PublicModule', //Lazy load public module
        data: { preload: true }
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class RootRoutingModule {
    constructor(private router: Router) {
        router.events.subscribe((event: NavigationEnd) => {
            setTimeout(() => {
                this.toggleBodyCssClass(event.url);
            }, 0);
        });
    }

    toggleBodyCssClass(url: string): void {
        if (url) {

            if (url === '/') {
                if (abp.session.userId > 0) {
                    $('body').attr('class', 'page-md page-header-fixed page-sidebar-closed-hide-logo');
                } else {
                    $('body').attr('class', 'page-md login');
                }
            }

            if (url.indexOf("/account/") >= 0) {
                $('body').attr('class', 'page-md login');
            }
            else if (url.indexOf("/public") >= 0) {
                if (abp.session.userId > 0) {
                    $('body').attr('class', 'page-md page-header-fixed page-sidebar-closed-hide-logo');
                } else {
                    $('body').attr('class', 'page-md login');
                }
            }
            else {
                $('body').attr('class', 'page-md page-header-fixed page-sidebar-closed-hide-logo');
            }
        }
    }
}

3 Answer(s)