Ледаче завантаження в йонічному 4

Ледаче завантаження звучить як складний процес, але насправді дуже прямо. Це стосується процесу завантаження фрагментів коду (таких як компонент, директива чи конвеєр), коли це вимагається не під час завантаження програми. Це дуже фреймворковий агностичний підхід до речей, і більш точні деталі тут подаються у вигляді NgModules для іонних додатків. NgModules - це спосіб, яким ми можемо впорядковувати сторінки нашого додатка та розділяти їх на різні шматки.

Ми розглянемо, як можна використовувати ліниве завантаження, щоб пришвидшити час завантаження ваших додатків Ionic Angular. Крім того, не має значення, чи ваш додаток упакований і завантажений з магазину, чи прогресивна веб-програма (PWA) працює на сервері, ліниве завантаження може допомогти збільшити час запуску в обох ситуаціях.

Ледаче навантаження в іонному кутовому:

Ідея «Ледачого завантаження» полягає в тому, що ми завантажуємо лише HTML, CSS та JavaScript, які потрібні нашому додатку, щоб відтворити свій перший маршрут, а потім завантажуємо додаткові частини нашого додатку за потреби. Чудова новина полягає в тому, що нова програма Ionic Angular 4.0 має ліниве завантаження, налаштоване за замовчуванням. Ледаче завантаження виражається через те, як налаштовані кутові маршрути:

Це початковий маршрут, який створюється для вас під час запуску нової програми Ionic за допомогою шаблону початкових вкладок. Вказуючи рядок loadChildren (замість передачі класу сторінки компоненту), Angular router буде динамічно завантажувати цей файл, коли користувач переходить до маршруту. Цей JavaScript також відокремлюється від решти програми у свій власний пакет.
Нижче ми маємо налаштування маршрутизатора для модуля маршрутизатора Tab:

Кожна вкладка в цій конфігурації також ліниво завантажує своїх дітей, тобто всі файли сторінки Tab2 не завантажуються, коли користувач переходить на сторінку tab2.

Як оптимізувати Ледаче завантаження:

Ледаче завантаження може допомогти вашій програмі швидко завантажитися, однак, якщо користувач переходить на нову сторінку, ресурси все одно потрібно буде завантажити, перш ніж користувач перегляне сторінку.

Імпортуючи модуль маршрутизатора в основний модуль програми, ви можете вказати стратегію попереднього завантаження, яку використовувати. Ми використовуємо багато варіантів:

1. Без попереднього завантаження: Не виконує жодної попередньої завантаження ліниво завантажених модулів. Це поведінка за замовчуванням, якщо стратегія не вказана.

2. Попередньо завантажте всі модулі: Після того, як ваша програма завантажить початковий модуль, ця стратегія попередньо завантажить усі інші модулі, коли мережа стане простоєм. У шаблонах Ionic для початківців ми автоматично встановлюємо цю опцію для вас.
Тепер попередньо завантажте параметр Strategy на об’єкт options під час налаштування маршрутизатора в app-routing.module.ts:

Стратегія preloadAllModules по суті завантажує решту програми в пам'ять після першого завантаження маршруту. Переміщення між сторінками тепер буде швидким, оскільки всі маршрути та модулі завантажені та готові до роботи.

3. Просте попереднє завантаження:

Для початку ми створимо просту стратегію, за допомогою якої ми можемо вказати, які маршрути ми хочемо попередньо завантажити. Використовуючи цю стратегію, ми можемо переконатись, що найважливіші частини нашого додатка прогрунтовані та готові до переходу після першого завантаження екрана.

У цьому попередньому завантаженні до цієї стратегії обробки передаються лише ліниві маршрути (які мають властивість loadChildren).

Тепер створіть простий клас завантаження для попереднього завантаження всіх ледачих маршрутів.

Тепер перейдіть до app-routing.module.ts і передайте SimpleLoadingStrategy в опціях. Крім того, оскільки спеціальна стратегія є послугою, передайте її також до колекції провайдерів:

Тепер будь-які маршрути з попередньо завантаженим значенням true будуть попередньо завантажені та готові до використання після того, як програма спочатку завантажиться.