Ионный - понимание отложенной загрузки

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

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

Страница 1

Страница 2

Страница 3

все они загружаются лениво.

Вдобавок скажем, у меня есть модальная страница:

ModalPage

Размер этой модальной страницы составляет 1,5 МБ.

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

У меня вопрос:

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

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

Его следует загружать только один раз

David 13.09.2018 15:00

3. "размер этой модальной страницы 1,5 МБ". Почему ? насколько это приемлемо для мобильного приложения?

Stavm 13.09.2018 20:23

Это теоретический вопрос, а не пример из реального мира, он просто пытается понять, как лучше всего разработать стратегию отложенной загрузки.

Ka Tech 14.09.2018 00:20
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
3
308
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

Спасибо Brass, так что вкратце ваше наблюдение: когда компонент используется на одной странице, он не повторно загружает этот компонент, а вместо этого повторно использует компонент, если требуется, на другой странице? Если так, то это хорошо.

Ka Tech 14.09.2018 00:26

Вроде, как бы, что-то вроде. Пожалуйста, ознакомьтесь с некоторыми обновлениями, которые я вношу в свой ответ в ближайшее время.

BRass 14.09.2018 15:16

Другие вопросы по теме