SAPUI5 - Предварительный просмотр перед навигацией.Улучшение производительности

Question

Я работаю на SAPUI5 version: 1.56.13, гибридном приложении с Cordova только с платформой Android .

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

В первый раз пользователь перемещается к представлению, как 30 секунд , чтобы отобразить представление.

второй раз требуется, как 5 секунд , чтобы открыть его.

Я пытался, пока пользователь находится в другом представлении:

1. Создание вида на фоне.

sap.ui.view({
    viewName: "myViewFolder.MyView",
    controller: sap.ui.controller("myControllerFolder.MyController"),
    type: sap.ui.core.mvc.ViewType.XML,
    async: true
}).loaded().then(function(oView) {
    // I save the reference on app context so use it later (now is there just for testing).
    appScope.__myView = oView;
}); 

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

   getDataFromService(this, oData => { 
       let oModel = this.getOwnerComponent().getModel(Constants.MY_DATA_MODEL)
       oModel.setData(oData);
   });
   

3. Инициализация представления методом attachInit:

   new sap.ui.xmlview({viewName:"myViewFolder.MyView"}).placeAt("content");
   

4. Перейти к просмотру:

   appScope.getRouter().navTo("MyView")
   

Я вижу, что только когда я нахожусь на этапе навигации, представление начинает отображаться, поскольку приложение регистрирует это:

Log-dbg.js: 414 2019-07-11 12: 36: 45.609300 Во время операции клонирования был найден шаблон, который не был помечен ни «templateShareable: true», ни «templateShareable: false». Фреймворк не разрушит шаблон. Это может вызвать ошибки (например, повторяющиеся идентификаторы) или утечки памяти (шаблон используется в агрегации «элементы» объекта «__list4»). Для получения дополнительной информации см. Документацию в разделе «Связывание агрегации». -

Это указывает на то, что представление визуализируется, поскольку у него есть несколько списков внутри списков с пользовательскими элементами для генерации представления в соответствии с моделью.

Брифинг:

• Контекст: Cordova с SAPUI5 (XML и JS) и Android платформа.
• Цель: предварительно загрузить представление в фоновом режиме, поэтому, когда пользователю необходимо перейти к этому представлению, оно будет уже загружено, поэтому время навигации будет меньше ( Улучшение производительности ).
• Соответствующая информация: Просмотр загружается медленно, поскольку содержит списки внутри списков с пользовательскими элементами. В основном все представление генерируется динамически из списков внутри списков .

Answer 1

Я использовал Cordova и Openui5 и раньше, и я могу довести время начальной загрузки до 3 секунд, а загрузка отдельных страниц должна быть почти мгновенной после начальной загрузки.

Вот некоторые вещи, которые я сделал, которые значительно улучшили мою производительность:

1. Не используйте CDN, но загружайте мобильную среду выполнения и обслуживайте ее из Cordova.Если загрузка страницы занимает 30 секунд, скорее всего, 99% этого времени - сетевое время загрузки файлов из SAP CDN.

2. Используйте файлы предварительной загрузки.Если ваше приложение загружает каждый модуль перед отображением страницы, то у вас будут огромные сетевые издержки.По умолчанию UI5 поставляется с файлами предварительной загрузки библиотеки для библиотек sap.Вы поймете, что он работает правильно, когда вы посмотрите на вкладку сети и увидите, что приложение загружает файлы library-preload.js при первом запуске приложения.Чтобы включить его, я думаю, вам просто нужно выполнить следующее: https://openui5.hana.ondemand.com/#/topic/676b636446c94eada183b1218a824717

3. Вы также можете создать файл предварительной загрузки для вашего собственного исходного кода, используя это: https://github.com/SAP/grunt-openui5, который помещает весь ваш исходный код в один файл, который будет загружен при первом запуске приложения.Разница между 250 HTTP-запросами в течение срока службы вашего приложения и 1 HTTP-запросом в начале вашего приложения.

Я думаю, что наибольшее увеличение производительности можно найти в порядке опций, которые я дал выше.Самый простой способ - просто изменить точку загрузки с CDN на локальную копию UI5.Вы легко увидите, как время запуска сократилось с 30 до 3 секунд, а количество просмотров страниц уменьшилось с 5 до 1 секунды.

Удачи!