18. Оптимизация

18. Оптимизация

Оптимизация SAPUI5 приложений — важный этап, позволяющий повысить производительность, отзывчивость и удобство использования конечного продукта. Ниже приведены основные best practices с примерами, как их реализовать на практике.

1. Lazy Loading и Split-Application

Когда:
Ваше приложение большое, содержит много страниц, контроллеров, библиотек.

Как настроить:

  • Lazy loading контроллеров/фрагментов: 
    sap.ui.require(["my/app/controller/HeavyController"], function(HeavyController) {
  // Используйте контроллер только когда он реально нужен
});
  • Lazy loading фрагментов: 
    if (!this._oDialog) {
  Fragment.load({
    name: "my.app.view.fragments.MyDialog",
    controller: this
  }).then(function(oDialog){
    this._oDialog = oDialog;
    this.getView().addDependent(oDialog);
    oDialog.open();
  }.bind(this));
} else {
  this._oDialog.open();
}
  • Split-Application (Component-preload.js):
    В manifest.json: 
    "sap.ui5": {
  "async": true,
  "resources": {
    "js": [
      {
        "uri": "Component-preload.js"
      }
    ]
  }
}
    Используйте ui5 build для генерации preload-файлов.

2. Минимизация количества запросов

Когда:
Много обращений к серверу, особенно при инициализации приложения.

Как настроить:

  • Batch-запросы: 
    var oModel = new sap.ui.model.odata.v2.ODataModel("/odata/service/", {
  useBatch: true
});
  • Кэширование данных: 
    var oModel = new sap.ui.model.odata.v2.ODataModel("/odata/service/", {
  defaultCountMode: "Inline",
  refreshAfterChange: false
});
  • Локальное хранение: 
    localStorage.setItem("userData", JSON.stringify(data));
// При необходимости:
var data = JSON.parse(localStorage.getItem("userData"));

3. Эффективное использование Data Binding

Когда:
Большие объёмы данных, сложные таблицы, списки.

Как настроить:

  • One-way binding: 
    <Text text="{/someProperty}" />
    В контроллере: 
    this.getView().bindElement({
  path: "/someEntity",
  mode: "OneWay"
});
  • Фильтрация и сортировка на сервере: 
    var oFilter = new Filter("Status", FilterOperator.EQ, "Active");
oTable.getBinding("items").filter([oFilter]);
  • Aggregation binding с пагинацией: 
    <Table
  growing="true"
  growingThreshold="20"
  items="{/Products}">
  <!-- ... -->
</Table>

4. Работа с ресурсами

Когда:
Много JS/CSS файлов, тяжёлые изображения.

Как настроить:

  • Минификация и бандлинг:
    В корне проекта: 
    ui5 build --all
    Это создаст минифицированные и объединённые файлы.
  • Оптимизация изображений:
    Используйте онлайн-сервисы или инструменты типа ImageOptim для сжатия.
  • Удаление неиспользуемых библиотек:
    В manifest.json: 
    "sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.m": {},
      "sap.ui.core": {}
      // Удалите лишние библиотеки
    }
  }
}

5. UI и рендеринг

Когда:
Медленная отрисовка, сложные layout-структуры.

Как настроить:

  • Сокращайте количество контролов:
    Используйте простые layout-контейнеры (VBox, HBox) вместо вложенных Grid, FlexBox без необходимости.
  • Виртуализация списков: 
    <List
  growing="true"
  growingScrollToLoad="true"
  items="{/LargeCollection}">
  <!-- ... -->
</List>
  • Custom controls:
    Используйте стандартные контролы, кастомные — только если нет стандартного решения.

6. Асинхронность

Когда:
Долгая загрузка данных, блокировка UI.

Как настроить:

  • Асинхронная загрузка компонентов:
    В manifest.json: 
    "sap.ui5": {
  "async": true
}
  • Промисы и async/await: 
    async function loadData() {
  const data = await fetch("/odata/service/EntitySet");
  // обработка данных
}

7. Мониторинг и профилирование

Когда:
Необходим анализ производительности, поиск узких мест.

Как настроить:

  • Support Assistant:
    Включите с помощью сочетания клавиш: Ctrl+Shift+Alt+S в браузере.
  • UI5 Inspector:
    Установите расширение для Chrome/Edge.
  • Логирование: 
    jQuery.sap.log.info("Данные загружены за " + time + " мс");

8. Работа с i18n

Когда:
Много языков, большие файлы переводов.

Как настроить:

  • Ленивая загрузка переводов:
    Используйте асинхронную загрузку ресурсов: 
    sap.ui.getCore().getLibraryResourceBundle("my.app", true).then(function(oBundle){
  // используйте oBundle.getText(...)
});
  • Минимизация строк:
    Используйте ключи, не дублируйте значения в i18n.properties.

9. Best Practices для мобильных устройств

Когда:
Приложение используется на смартфонах/планшетах.

Как настроить:

  • Touch-оптимизация:
    Используйте контролы из библиотеки sap.m, адаптивные layout (ResponsiveGridLayout).
  • Lazy loading для изображений и данных:
    Не загружайте большие изображения сразу, используйте growing для списков.

10. Регулярный аудит

Когда:
Перед релизом, при изменениях в проекте.

Как настроить:

  • Линтеры:
    Настройте ESLint: 
    npm install eslint --save-dev
npx eslint yourfile.js
  • Анализаторы производительности:
    Используйте Chrome DevTools, вкладка Performance.
  • Обновление зависимостей: 
    npm outdated
npm update

Вывод:
Оптимизация — это не разовая задача, а постоянный процесс. Следуйте best practices, используйте инструменты анализа и не забывайте о пользовательском опыте. Быстрое и отзывчивое приложение — залог успеха вашего SAPUI5 проекта!

См. также