Ленивая загрузка в угловом приложении позволяет нам сократить время загрузки и загрузку ресурсов по требованию.

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

Когда пользователь щелкает ссылку, модуль уже загружен в память. Этот механизм позволяет Angular немедленно начать рендеринг, а не ждать загрузки модуля по сети.

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

  • PerloadingAllModules
  • Без предварительной загрузки
  • CustomPreloading

Давайте разберемся, как они работают:

Вот как вы устанавливаете PreloadAllModules.

Точно так же вы можете сделать для NoPreloading

В этом случае никакие модули не будут предварительно загружены.

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

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

Для этого мы реализуем CustomPreloadingStrategy.

А теперь давайте посмотрим, как этого добиться

  • Сначала настройте свой маршрут, какой путь вы хотите предварительно загрузить.

Здесь мы используем свойство данных, мы можем передавать любые произвольные данные в наш маршрут с помощью данных. Мы передаем объект в данные. Внутри объекта мы добавили customProperty «предварительная загрузка» и установили для него значение true.

  • Далее вы создадите файл custom-preloaded.ts.

Здесь реализуется абстрактный метод PreloadingStrategy.

Если перейти к определению этого метода

Вы можете видеть, что там определена абстрактная предварительная загрузка

Вернемся к нашему customPreloaded, что мы на самом деле делаем:

  • Сначала мы проверим, есть ли у маршрута свойство data.
  • Если да, то мы проверяем, есть ли у данных объект предварительной загрузки и установлен ли он в true.
  • Если оба совпадают, мы предварительно загрузим модуль, для этого нам нужно вернуть функцию, и если какое-либо условие ложно, мы используем «метод» для возврата наблюдаемого нуля.

Таким образом, наш customPreloaded будет знать, получил ли он эту предварительную загрузку, а если нет, то не будет выполнять предварительную загрузку.

Вот как вы реализуете CustomPreloadingStrategy

Спасибо за прочтение, ставьте лайк и делитесь, пожалуйста