Вам когда-нибудь приходилось создавать/развертывать только часть вашего приложения Angular или, может быть, скрывать некоторые маршруты в определенных средах?
Эта статья поможет вам уменьшить размер пакета/время сборки, отправляя только то, что необходимо. .
Вот некоторые из концепций, которые мы рассмотрим:
- Ленивые маршруты загрузки (с использованием автономных компонентов)
- Параметры конфигурации CLI — замена файлов
- Новые функции Angular, такие как: bootstrapApplication, provideRouter(), RouterOutlet, RouterLinkWithHref
Начиная
Во-первых, мы создали приложение Angular v15, чтобы воспользоваться преимуществами некоторых новых функций, но это не значит, что этот пример неприменим к предыдущим версиям.
Мы создадим 2 компонента, которые также будет представлять 2 маршрута приложения. Мы назовем наши компоненты и маршруты First & Second.
Затем мы перейдем к нашему AppComponent, чтобы разместить наши маршруты, и, кстати, превратим его в автономный компонент. Это означает, что нам нужно будет импортировать нужные нам директивы, такие как RouterOutlet.
Поскольку AppComponent является автономным, наш main.ts будет немного отличаться от значения по умолчанию. Обратите внимание, что здесь мы загружаем маршруты с помощью метода provideRouter().
Наша первоначальная настройка для ленивой загрузки кажется готовой. Итак, мы попробуем, выполнив простую команду:
ng build
А вот что получается:
Сборка создала все основные файлы, а также 2 фрагмента с отложенной загрузкой, по одному для каждого маршрута.
Сборка части приложения
Итак, давайте перейдем к нашему сценарию, в котором говорится, что у нас разные установки, и одна из наших сред использует только первый маршрут.
Наш подход будет заключаться в предоставлении разной конфигурации сборки для каждого случая путем добавления дополнительных параметров в наш angular.json.
Начнем с добавления двух альтернативных файлов маршрутов. routes.first.ts и routes.second.ts в той же папке, что и routes.ts . Файл route.first.ts будет содержать только первый маршрут, а второй также будет иметь собственный маршрут. Это означает, что это будет выглядеть так:
Теперь нам каким-то образом нужно сообщить Angular, что нам нужен вывод сборки, который будет содержать только этот маршрут.
Это будет происходить внутри angular.json:
Мы представили две новые конфигурации, первую и вторую, и в каждой конфигурации используется параметр fileReplacements, чтобы менять местами файл маршрутов каждый раз при выборе конфигурации.
Теперь нам просто нужно запустить:
ng build --configurations:first
Выходные данные сборки содержат только выбранный маршрут/чанк, который в нашем случае первый:
Частичный ng также служит
Добавив еще пару строк в наш angular.json, мы можем использовать эту конфигурацию при обслуживании:
Команда подачи будет:
ng serve --configuration=first
Меню динамического маршрута
Последнее, что мы можем сделать, это сгенерировать наше меню в соответствии с выбранной конфигурацией.
Быстрое решение для этого будет следующим:
Мы импортируем все необходимые директивы отдельно, без необходимости использования всего модуля Common. Это также поможет нам уменьшить окончательный размер пакета. Затем мы импортируем файл маршрутов (который будет заменен на нужный) и сопоставляем с путем маршрута.
Наконец, мы повторяем маршруты в нашем шаблоне:
Заключение
Вот и все! Надеюсь, вам понравилась эта статья!
Вы можете найти репозиторий с вышеуказанным кейсом здесь.
Ваше здоровье!
