Повысьте производительность существующего приложения Angular с помощью отложенной загрузки

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

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

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

Шаги:
1) Перемещение файлов и папок

Определите те блоки (компоненты, директивы, каналы) вашего приложения, которые должны работать вместе и тесно связаны друг с другом. После того, как вы закончите идентификацию блоков, которые нужно загружать лениво, начните реструктуризацию своего приложения, переместив эти блоки и сгруппируйте их в более конкретную папку. Для этого у нас есть отличное расширение Visual Studio Move TS, которое сокращает накладные расходы на поддержку относительных путей и операторов импорта.

2) Создание функциональных модулей с маршрутизацией

Давайте перейдем к папке с вашей функцией и сгенерируем ленивый модуль с помощью Angular CLI.

ng g m lazy --flat --routing

--flatflag предотвращает создание каталога, а --routing flag создает файл lazy-routing.module.ts, который мы будем использовать для настройки маршрутов для нашего модуля с отложенной загрузкой.

Каждый Компонент принадлежит только одному модулю.

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

Для более четкого понимания функции и общего модуля перейдите по этой ссылке.

3) Настроить маршруты

Теперь давайте представим наши функциональные модули в картинке, настроив маршруты к функциональному модулю в AppRoutingModule или AppModule, где бы вы ни определили свои маршруты. Для этого мы используем свойство loadChildren, значением которого является строка, представляющая путь к модулю вместе с хешем (#) и именем класса модуля.

Теперь внутри файла маршрутизации ленивого модуля настройте дочерние маршруты, вызвав метод forChlid() RouterModule. Обратите внимание, что в AppRoutingModule мы используем forRoot, а в модуле отложенной загрузки мы используем forChild.

Чтобы сохранить маршруты вашего существующего приложения, вы можете настроить маршруты на уровне приложения с пустой строкой, а в дочерних маршрутах использовать pathMatch strategy-full, который проверяет точный равный путь.

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

почувствовать потребность…. потребность в скорости ;-)

Если вы хотите узнать больше о отложенной загрузке, перейдите по этой ссылке: Модули функции отложенной загрузки

Не стесняйтесь комментировать свои мысли и дайте мне знать, если вы столкнетесь с какой-либо проблемой при реализации этого.