Отложенная загрузка JavaScript с помощью Angular Loadable (ngx-loadable ~ 2.2 кБ)

Отложенная загрузка JavaScript с помощью Angular Loadable

От автора: отложенная загрузка JavaScript — более простой способ добавления не маршрутизируемых модулей Angular!

Рабочий пример использования медленной сети для демонстрации ngx-loadable (демо)

Демо | Исходный код

Одна вещь, которая всегда вызывала у меня некоторое смущение, когда я начал работать над «Проектами Angular» (до v6) после некоторого времени работы с React, заключалась в том, что я мог загружать отложено только маршрутизируемые модули Angular. В React вы можете отложено загрузить любой компонент, используя react-loadable или даже React.lazy.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Я был взволнован, когда на прошлой неделе прочитал статью Нетанеля Базаля об отложенной загрузке не маршрутизируемых модулей Angular (хотя эта функция была доступна в Angular v6). Но по моим ощущениям, у него слишком много этапов реализации отложенной загрузки, поэтому я решил создать библиотеку ngx-loadable, которая может выполнять отложенную загрузку не маршрутизируемых модулей Angular, управлять различными этапами загрузки, а также позволяет предварительно загружать по требованию модули с помощью более простого API.

ngx-loadable

Логотип библиотеки представляет быстрое, как порыв ветра, приложение

Проблема

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

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

Это может помочь быстрее загружать маршруты. Предположим, что у вас на странице много контента, и вы хотите загружать компоненты или библиотеки только тогда, когда контент отображается (при прокрутке). Для чего нам загружать весь контент одновременно с содержимым сверху?

Разделение кода по компонентам и по маршрутам (изображение: react-loadable)

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

Решение

В ngx-loadable заключает комплексную реализацию для отложенной загрузки не маршрутизируемых модулей в простой API. Он обеспечивает компонент ngx-loadable и сервис LoadableService для отложено загружаемых модулей. Компонент может использоваться для управления загрузкой одного модуля и для отображения различных состояний, например, загрузка, ошибка, пауза и загружено.

Шаг 1: Сначала установите ngx-loadableс помощью npm / yarn, а затем включите LoadableModule в AppModule.

Шаг 2: Добавьте модуль с загруженным компонентом. Итак, давайте представим, что у нас есть модуль с именем login-modal. Вам нужно создать его через Angular CLI с помощью следующих команд:

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

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Не забудьте добавить компонент в загрузчик:

Шаг 3: Теперь просто добавьте путь LoginModalModule для angular.json в массив lazyModules. Это позволит Angular CLI знать, что он должен создать отложено загружаемый скрипт для этого пути. Надеемся, что в будущем это будет автоматизировано с помощью флага, используя Angular CLI.

Шаг 4: Использование компонента ngx-loadable

В этом примере, когда на кнопку наводится мышь, предварительно загружается модуль LoginModal, и после нажатия кнопки, если модуль все еще загружается, используется загрузочный слот для отображения сообщения о загрузке, а затем LoginModalComponent загружается в элемент ngx-loadable.

ИЛИ используйте метод preload/preloadAll из LoadableService для загрузки модуля / модулей:

ngx-loadable работает из коробки для простых приложений Angular, у которых все модули располагаются в папке src / app. Вы можете настроить ngx-loadable на использование пользовательских путей, передав конфигурацию в LoadableModule:

Совет

Используйте ngx-perimeter для предварительной загрузки в зависимости от близости мыши к элементу или ngxInViewport для загрузки и отображения содержимого, если содержимое находится в области просмотра.

Заключение

Обрабатывая различные этапы реализации отложенной загрузки не маршрутизируемых модулей, ngx-loadable предоставляет простой компонент для управления отложенной загрузкой.

Сообщите нам о любых дополнительных функциях, связанных с отложенной загрузкой, которые вы хотите видеть в ngx-loadable — в репозитории github.

Автор: Zama Khan Mohammed

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree