Работая с ionic 3, я наконец внедряю ленивую загрузку в свои приложения. У меня теоретический вопрос о производительности, который применим как к Ionic 3/4.
Гипотетически скажем, у меня 3 страницы:
Страница 1
Страница 2
Страница 3
все они загружаются лениво.
Вдобавок скажем, у меня есть модальная страница:
ModalPage
Размер этой модальной страницы составляет 1,5 МБ.
Предположим, что ModalPage используется на страницах 1 и 2 и включен в соответствующий module.ts для каждой страницы (не в app.module).
У меня вопрос:
Когда я загружаю приложение, я сначала открываю страницу 1, а затем помещаю страницу 2 в стек. Поскольку ModalPage не является глобальным и импортируется отдельно для страницы 1 и страницы 2. Означает ли это, что мое приложение, когда я открываю page1, будет лениво загружать и загружать модальную страницу размером 1,5 МБ, а затем снова другой экземпляр модальной страницы @ 1,5 МБ, когда я нажимаю страницу 2 в стек? Итак, в общей сложности я скачиваю кода на 3 МБ?
Если вышеизложенное верно, помимо проблем с загрузкой, есть ли какое-либо другое влияние на производительность? т.е. наличие нескольких экземпляров компонентов / страниц, загруженных через модули страниц, по сравнению с глобальным импортом компонента / страниц в app.module
3. "размер этой модальной страницы 1,5 МБ". Почему ? насколько это приемлемо для мобильного приложения?
Это теоретический вопрос, а не пример из реального мира, он просто пытается понять, как лучше всего разработать стратегию отложенной загрузки.
У меня есть приложение ionic 3, которое лениво загружается (не использует app.module), с компонентом, используемым на нескольких страницах. Я никогда не проверял шаблон загрузки, поэтому запустил для проверки экземпляр разработчика.
Вкладка "Источники"
Если вы посмотрите на вкладку Sources
в инструментах разработчика, для отладочной сборки (с исходными картами) вы увидите, что при начальной загрузке общий компонент вообще не загружается. Затем, как только я попадаю на страницу, которой нужен компонент, он загружается в стандартный каталог components
(во всяком случае, при использовании отладочной сборки). Переход на вторую страницу, которая также использует этот компонент, не загружает второй его экземпляр или что-то еще (на вкладке Sources
).
Вкладка Сеть
Если вы выполните то же действие, но посмотрите на вкладку Network
, все будет не так ясно. Как только вы попадаете на первую страницу, которая использует общий компонент, в моем случае был запрошен файл 11.js
. Глядя на этот файл, очевидно, что в нем был машинописный текст общего компонента. Затем я попал на вторую страницу, которая использует этот компонент, и (в моем случае) был загружен 18.js
, и в нем тоже был машинописный текст общего компонента.
Исходя из этого, у меня сложилось впечатление, что отладочная сборка загружает машинописный текст общего компонента несколько раз (один раз на страницу, которая в нем нуждается). Не уверен, что сборка продукта или какие-либо другие факторы могут изменить этот результат.
Спасибо Brass, так что вкратце ваше наблюдение: когда компонент используется на одной странице, он не повторно загружает этот компонент, а вместо этого повторно использует компонент, если требуется, на другой странице? Если так, то это хорошо.
Вроде, как бы, что-то вроде. Пожалуйста, ознакомьтесь с некоторыми обновлениями, которые я вношу в свой ответ в ближайшее время.
Его следует загружать только один раз