Используем вспомогательные маршруты в Angular, чтобы уменьшить размер приложения

Существует множество способов, как уменьшить размер приложения angular, тем самым повысив его производительность, например, при отложенной загрузке. Тем не менее, хочу поделиться с вами подходом, использующим «вспомогательные маршруты».

Давайте сразу перейдем к делу.

1. Открываем терминал и создаём новое приложение angular с помощью следующей команды: ng new angular-aux-demo

2. Открываем приложение в коде Visual Studio и создаём два новых компонента. Я дам им названия product-card и shopping-card. Сделать это можно с помощью команды ng g c [название компонента]

3. Заполните эти два компонента, добавив немного кода HTML и CSS, чтобы увеличить размер приложения. Для этого я загружу код карты из Интернета и добавлю его в оба компонента: Код карты
4. Теперь создаём вспомогательные маршруты для этих двух компонентов в приложении. Код показан ниже:

5. Используйте router-outlet в app.component.html вот так:

6. Запустите приложение, выполнив команду ng serve:

Чётко видно, что размер файла main.js 97,05КБ (в моём случае).

7. Теперь закомментируем эти маршруты и напрямую вызовем эти компоненты, используя их селекторы в файле app.component.html.

8. Ещё раз запускаем код (ng serve):

Вы можете видеть, что размер того же файла main.js немного увеличился до 97,17 КБ.
Причина такого поведения заключается в том, что, хотя мы используем вспомогательные маршруты для компонентов, нам не нужно определять эти компоненты в массиве объявлений. Такая небольшая разница в размерах может быть невыгодна для небольших приложений, но при создании сложных и крупномасштабных приложений, содержащих несколько лениво загруженных модулей, каждый из которых содержит несколько больших компонентов, все эти маленькие байты могут составлять десятки килобайт, что определенно может помочь повысить производительность приложения за счёт уменьшения его размера. Кроме того, это также может помочь нам сделать длинный и бесконечный массив объявлений коротким и точным, тем самым сохраняя файлы модулей в чистоте.
Заключение: поскольку маршрутизация используется в каждом приложении Angular, добавление вспомогательных маршрутов для повторно используемых компонентов может повысить производительность приложения за счёт уменьшения его размера, а также немного помочь нам сохранить код в чистоте.