Мързеливо зареждане звучи като сложен процес, но всъщност е много прав. Той се отнася до процеса на зареждане на парчета код (като компонент, директива или конвейер), когато се изисква, а не когато приложението се зарежда. Това е много агностичен подход към нещата, а по-фините подробности тук са под формата на NgModules за йонни приложения. NgModules са начинът, по който можем да организираме страниците на нашето приложение и да ги разделим на различни парчета.

ionic

Ще разгледаме как може да се използва мързеливо зареждане, за да се ускори времето за зареждане на вашите Ionic Angular приложения. Освен това няма значение дали приложението ви е пакетирано и изтеглено от магазина или прогресивно уеб приложение (PWA), работещо на сървър, мързеливото зареждане може да ви помогне да увеличите времето за стартиране и в двете ситуации.

Мързеливо натоварване в йонен ъгъл:

Идеята на Lazy Loading е, че изтегляме само HTML, CSS и JavaScript, необходими на нашето приложение, за да изобрази първия си маршрут, и след това зареждаме допълнителни части от нашето приложение, ако е необходимо. Страхотната новина е, че ново приложение на Ionic Angular 4.0 има лениво зареждане, конфигурирано по подразбиране. Мързеливото натоварване се изразява чрез начина на настройка на ъгловите маршрути:

Това е първоначалният маршрут, който е създаден за вас при стартиране на ново йонийско приложение с помощта на шаблона за стартиране на раздели. Като посочва низ loadChildren (вместо да предава клас на страница на компонент), Angular маршрутизаторът ще зарежда този файл динамично, когато потребителят навигира до маршрута. Този JavaScript също се отделя от останалата част на приложението в свой собствен пакет.
Сега по-долу имаме настройка на рутера за модула Tab router:

Всеки раздел в тази конфигурация зарежда своите деца също мързеливо, което означава, че всички файлове на страницата Tab2 не се зареждат, когато потребителят навигира към страницата tab2.

Как да оптимизираме Lazy Loading:

Мързеливото зареждане може да помогне на приложението ви да се зареди бързо, но ако потребителят се придвижва до нова страница, активите ще трябва да бъдат изтеглени, преди потребителят да разгледа страницата.

Когато импортирате модула на рутера в основния модул на приложението, можете да посочите стратегия за предварително зареждане, която да използвате. Има много опции, които използваме:

1. Без предварително зареждане: Не извършва предварително зареждане на лениво заредени модули. Това е поведението по подразбиране, ако не е посочена стратегия.

2. Предварително зареждане на всички модули: След като приложението ви зареди първоначалния модул, тази стратегия ще зареди предварително всички останали модули, когато мрежата стане неактивна. В шаблоните за стартер на Ionic автоматично задаваме тази опция за вас.
Сега предварително зареждане на параметъра Strategy на обекта options при настройка на рутера в app-routing.module.ts:

Стратегията preloadAllModules по същество зарежда останалата част от приложението в паметта след първото зареждане на маршрута. Придвижването между страниците вече ще бъде бързо, тъй като всички маршрути и модули са заредени и готови за движение.

3. Лесно предварително зареждане:

Ще започнем, като създадем проста стратегия, която можем да използваме, за да определим кои маршрути искаме да заредим предварително. Използвайки тази стратегия, можем да гарантираме, че най-важните части от нашето приложение са грундирани и готови за навигация след първите зареждания на екрана.

В това предварително зареждане в тези стратегии за обработка се предават само маршрути, които са мързеливи (имат свойството loadChildren).

Сега създайте простия клас за зареждане, за да заредите предварително всички мързеливи маршрути.

Сега влезте в app-routing.module.ts и предайте SimpleLoadingStrategy в опциите. Освен това, тъй като персонализираната стратегия е услуга, предайте я и в колекцията на доставчиците:

Сега всички маршрути с предварително зареждане, зададено на true, ще бъдат предварително заредени и готови за използване, след като приложението първоначално се зареди.