Ionic - Понимание ленивой загрузки

Question

Работа с ionic 3 Я наконец-то внедряю ленивую загрузку в свои приложения.У меня есть теоретический вопрос о производительности, который относится как к Ionic 3/4.

Гипотетически говорят, что у меня есть 3 страницы:

Page1

Page2

Page3

Все они загружены с отложенной загрузкой.

Кроме того, скажем, у меня есть модальная страница:

ModalPage

Эта модальная страница имеет размер 1,5 МБ.

Предположим,ModalPage используется на странице 1 и странице 2 и включается в соответствующие module.ts для каждой страницы (не в app.module).

Мой вопрос:

1. Когда я загружаю приложение и сначала открываю страницу 1, а затем помещаю страницу 2 в стек.Поскольку ModalPage не является глобальным и импортируется отдельно для страницы 1 и страницы 2. Означает ли это, что мое приложение, когда я открываю страницу 1, будет лениво загружать и загружать модальную страницу 1,5 МБ, а затем снова другой экземпляр модальной страницы @ 1,5 МБ, когда я нажимаю страницу?2 в стек?Таким образом, в общей сложности я загружаю код на 3 Мб?

2. Если все вышесказанное верно, помимо проблем с загрузкой, есть ли какое-либо другое влияние на производительность?т.е. наличие нескольких экземпляров компонентов / страниц, загруженных через модули страниц, по сравнению с глобальным импортом компонента / страниц в app.module

Answer 1

У меня есть приложение ionic 3, которое загружается медленно (не использует app.module), а компонент используется на нескольких страницах. Я никогда не проверял шаблон загрузки, поэтому я запустил экземпляр dev для проверки.

Вкладка "Источники" Если вы посмотрите на вкладку Sources в инструментах разработки, для отладочной сборки (с исходными картами) вы увидите, что в начальный момент времени общий компонент вообще не загружается. Затем, когда я попадаю на страницу, которая нуждается в компоненте, он загружается в стандартный каталог components (во всяком случае, при использовании отладочной сборки). Нажатие на вторую страницу, которая также использует этот компонент, не загружает второй его экземпляр или что-либо еще (на вкладке Sources).

Вкладка "Сеть" Если вы выполняете то же действие, но смотрите на вкладку Network, это не так ясно. После того, как вы нажали первую страницу, которая использует общий компонент, в моем случае был запрошен файл 11.js. Глядя на этот файл, он явно содержал машинописный текст общего компонента. Затем я зашел на вторую страницу, которая использует этот компонент, и (в моем случае) 18.js был загружен, и на нем тоже была машинопись общего компонента.

Исходя из этого, у меня сложилось впечатление, что отладочная сборка загружает машинопись общего компонента несколько раз (по одному разу на страницу, которая в этом нуждается). Не уверен, что билд или какие-то другие факторы могут изменить этот результат.