Angular 7 загружает компонент после входа в систему очень медленно

Question

Загрузка компонента after login в моем приложении angular 7 настолько медленная, что при первом входе пользователя в приложение.Но если он выйдет и войдет снова, не закрывая браузер, скорость будет лучше.

Дерево маршрутизации выглядит следующим образом:

1. При запуске приложения мы имеемкомпонент входа в систему;

2. Когда пользователь войдет в систему, он будет перенаправлен на компонент dashboard, который содержит модуль отложенной загрузки, следующим образом:

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

И HTML-код этого компонента:

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

<<app-main-navbar> - это компонент, имеющий <mat-sidenav> и <mat-toolbar>, в котором он содержит <router-outlet></router-outlet>

На обоих dashboard и main navbar компонентах, IДля проверки времени выполнения компонента добавлено следующее:

Конструктор

//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)

Результат:

конструктор панели мониторинга

конструктор панели мониторинга: 10545.69999999967

mainNavbar constr mainNavbatr

Время создания: 10582.699999999932

конструктор панели инструментов

панель мониторинга ngOnInit: 10622.000000000298

mainNav ngOninit

mainNavbatr ngOnInit время: 10624.2000000002

с предупреждением:1062 *

[Вмешательство] Обнаружена медленная сеть.Смотрите https://www.chromestatus.com/feature/5636954674692096 для более подробной информации.При загрузке будет использоваться резервный шрифт: https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

Answer 1

При первом входе в систему и перенаправлении внутри приложения необходимо загрузить MainNavBarModule (или любой другой модуль, на котором размещен экран перенаправления по умолчанию), что объясняет дополнительное время загрузки.

При последующих загрузкахстраницы (например, выход из системы и повторный вход в систему), модуль кэшируется в вашем браузере, поэтому загрузка происходит быстро.

Это поведение по умолчанию для отложенной загрузки.

Вы можете отслеживать это на вкладке Сеть в Инструментах разработчика вашего браузера, фильтруя только запросы XHR.