От автора: отложенная загрузка JavaScript — более простой способ добавления не маршрутизируемых модулей Angular!
Рабочий пример использования медленной сети для демонстрации ngx-loadable (демо)
Одна вещь, которая всегда вызывала у меня некоторое смущение, когда я начал работать над «Проектами Angular» (до v6) после некоторого времени работы с React, заключалась в том, что я мог загружать отложено только маршрутизируемые модули Angular. В React вы можете отложено загрузить любой компонент, используя react-loadable или даже React.lazy.
Я был взволнован, когда на прошлой неделе прочитал статью Нетанеля Базаля об отложенной загрузке не маршрутизируемых модулей Angular (хотя эта функция была доступна в Angular v6). Но по моим ощущениям, у него слишком много этапов реализации отложенной загрузки, поэтому я решил создать библиотеку ngx-loadable, которая может выполнять отложенную загрузку не маршрутизируемых модулей Angular, управлять различными этапами загрузки, а также позволяет предварительно загружать по требованию модули с помощью более простого API.
Логотип библиотеки представляет быстрое, как порыв ветра, приложение
Проблема
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 с помощью следующих команд:
> ng g m login-modal > ng g c login-modal -m login-modal
Обратите внимание. Имя модуля и компонента должно быть одинаковым, и они должны создаваться в каталоге по умолчанию. Если вы хотите изменить его, вам нужно передать конфигурацию в LoadableModule, который мы рассмотрим ниже в этой статье.
Не забудьте добавить компонент в загрузчик:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginModalComponent } from './login-modal.component'; @NgModule({ imports: [ CommonModule ], declarations: [LoginModalComponent], bootstrap: [LoginModalComponent]
})
export class LoginModalModule {
}Шаг 3: Теперь просто добавьте путь LoginModalModule для angular.json в массив lazyModules. Это позволит Angular CLI знать, что он должен создать отложено загружаемый скрипт для этого пути. Надеемся, что в будущем это будет автоматизировано с помощью флага, используя Angular CLI.
{ ... "projects": { ... "architect": { "build": { "options": { ... "lazyModules": [ "src/app/login-modal/login-modal.module" ] } ... } }
}Шаг 4: Использование компонента ngx-loadable
<button (click)="show = true" (mouseenter)="loginModalModule.preload()"> Preload on mouseenter and show on click </button> <ngx-loadable #loginModalModule [module]="'login-modal'" [show]="show" [timeout]="1000" > <div loading>Loading...</div> <div error>Error</div> <div timedOut> TimedOut! <button (click)="loginModalModule.reload()"> Reload </button> </div> </ngx-loadable>
В этом примере, когда на кнопку наводится мышь, предварительно загружается модуль LoginModal, и после нажатия кнопки, если модуль все еще загружается, используется загрузочный слот для отображения сообщения о загрузке, а затем LoginModalComponent загружается в элемент ngx-loadable.
ИЛИ используйте метод preload/preloadAll из LoadableService для загрузки модуля / модулей:
import { LoadableService } from 'ngx-loadable';
...
class YourComponent { contructor(private loadableService: LoadableService) { } load() { this.loadableService.preload('lazy') .then(() => console.log('loaded')) .catch((error) => console.error(error)); } }
}ngx-loadable работает из коробки для простых приложений Angular, у которых все модули располагаются в папке src / app. Вы можете настроить ngx-loadable на использование пользовательских путей, передав конфигурацию в LoadableModule:
@NgModule({ imports:[ BrowserModule, LoadableModule.forRoot({ appDir: 'src/app/lazy-loaded-modules/', fileMapping: { widget: 'src/app/custom/widget.module#SomeModule' } }) ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]
})
export class AppModule { }Совет
Используйте ngx-perimeter для предварительной загрузки в зависимости от близости мыши к элементу или ngxInViewport для загрузки и отображения содержимого, если содержимое находится в области просмотра.
Заключение
Обрабатывая различные этапы реализации отложенной загрузки не маршрутизируемых модулей, ngx-loadable предоставляет простой компонент для управления отложенной загрузкой.
Сообщите нам о любых дополнительных функциях, связанных с отложенной загрузкой, которые вы хотите видеть в ngx-loadable — в репозитории github.
Автор: Zama Khan Mohammed
Источник: https://medium.com/
Редакция: Команда webformyself.