Як відбувається завантаження lazy-loaded модулів?
В Angular lazy-loaded модулі (ліниво завантажувані) підвантажуються лише тоді, коли користувач переходить на певний маршрут, а не при старті застосунку.
Основні моменти
- Налаштування маршруту для лінивого завантаження:
ts
const routes: Routes = [
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then(m => m.AdminModule)
}
];loadChildrenвказує функцію, яка динамічно імпортує модуль черезimport().
- Що відбувається при переході на маршрут:
- Angular викликає функцію
loadChildren. - Браузер завантажує JS-файл модуля по мережі.
- Створюється екземпляр модуля та його компонентів, реєструються маршрути й сервіси.
- Переваги:
- Знижується розмір основного бандла застосунку.
- Покращується час старту застосунку, оскільки не потрібно завантажувати всі модулі одразу.
- Вплив на життєвий цикл:
- Lifecycle hooks компонентів модуля (
ngOnInit,ngAfterViewInitта ін.) викликаються лише після завантаження й рендерингу лінивого модуля. - Lazy-loaded модуль створюється динамічно, ніби він був створений окремо.
Іншими словами, lazy-loaded модуль підвантажується за потреби, через динамічний імпорт, і його компоненти та сервіси ініціалізуються лише при переході на відповідний маршрут.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.