Отложенная загрузка модулей

Отложенная загрузка повышает производительность, загружая модули только при необходимости. Давайте изучим эту важную возможность Angular.

Что такое отложенная загрузка?

Отложенная загрузка означает асинхронную загрузку модулей при переходе пользователя к определённому маршруту вместо загрузки всех модулей при запуске приложения.

Зачем использовать отложенную загрузку?

• Сокращает время первоначальной загрузки
• Повышает производительность
• Оптимизирует использование ресурсов

Создание модуля с отложенной загрузкой

Создайте функциональный модуль для отложенной загрузки с помощью Angular CLI:

ng generate module admin --route admin --module app.module

Настройка маршрутов с отложенной загрузкой

Настройте отложенную загрузку в модуле маршрутизации:

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

Тестирование отложенной загрузки

Используйте инструменты разработчика, чтобы убедиться, что модули загружаются только при активации маршрутов. Вы увидите, как новые файлы JS загружаются динамически.

Стратегии предварительной загрузки

Angular позволяет предварительно загружать модули с отложенной загрузкой, чтобы ещё больше ускорить навигацию. Распространённые стратегии:

• Без предварительной загрузки (по умолчанию)
• Предварительная загрузка всех модулей

Рекомендации по отложенной загрузке

Используйте отложенную загрузку для модулей, которые не нужны сразу после запуска приложения, например для панелей администратора или страниц настроек.

Итоги

Вы успешно научились реализовывать отложенную загрузку для повышения производительности приложения Angular. Отличная работа!