应用程序首次加载需要一分多钟

Question

我已经在 SAPUI5 中完成了一个应用程序并在 FLP 中进行了部署。首次加载需要 一分钟多，之后只需 2 到 3 秒。

当我在 Chrome 控制台中运行性能时，它显示脚本编写花费了太多时间。如何减少我的应用程序的初始加载时间？

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Orders</title>
    <script id="sap-ui-bootstrap"
      src="/sap/public/bc/ui5_ui5/1/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m, sap.ui.core"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-bindingSyntax="complex"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-preload="async"
      data-sap-ui-resourceroots='{"orders": "."}'
    ></script>
    <script>
      sap.ui.getCore().attachInit(function () {
        sap.ui.require([
          "sap/m/Shell",
          "sap/ui/core/ComponentContainer"
        ], function (Shell, ComponentContainer) {
          new Shell({
            app: new ComponentContainer({
              height : "100%",
              name : "orders"
            })
          }).placeAt("content");
        });
      });
    </script>
  </head>
  <body class="sapUiBody" id="content">
  </body>
</html>

控制器模块

sap.ui.define([
  "./BaseController",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/routing/History",
  "../model/formatter",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator",
  "sap/m/MessageToast"
], function(BaseController, JSONModel, /* ... */) { /*... */ }));

XML 命名空间

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:semantic="sap.m.semantic"
  xmlns:core="sap.ui.core"
  xmlns:table="sap.ui.table"
  xmlns:smartTable="sap.ui.comp.smarttable"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  controllerName="orders.controller.Worklist"
>
  <!-- ... -->
</mvc:View>

Answer 1

虽然一分钟时间太长，但 UI5 应用程序在您第一次运行时加载时间较长是正常的，因为它从 UI5 服务器下载 UI5 库 -- 下载库后，然后将它们缓存到您的浏览器中，因此，在接下来的运行秒内会快得多。

Answer 2

技术优化

我看到您在使用 sap.ui.comp.smarttable.SmartTable 时没有预加载其依赖项。

您绝对可以通过以下方式大幅减少应用程序的初始加载时间：

预加载依赖库，$metadata，以及
将库依赖项从 data-sap-ui-libs 移动到 manifest.json 中的 sap.ui5/dependencies/libs。参见。
识别并减少
最后，使用 UI5 Tooling's ui5 build command - 根据用例使用适用的命令选项 - 在部署应用程序之前捆绑并最小化所有相关组件文件。默认情况下，将生成一个名为 Component-preload.js 的包，它可以减少应用程序的整体大小和运行时的请求数量。

上述几点普遍适用于所有 UI5 应用程序，而不仅仅是 SmartTable。
有关其他与性能相关的准则，请参阅 Performance Checklist。

心理优化

除了技术优化，还应该考虑感知管理。

重要的是要注意 perceived performance 是真实的表现。毫秒数并不是真正重要的。
为了表明某事正在发生，我们可以利用 busy state, BusyIndicator, BusyDialog 和 ProgressIndicator 根据下图：

^{来源：Psychological Time: Tolerance Management}

Answer 3

组件预加载文件有助于提高应用在初始加载时的性能。您可以轻松创建此文件，例如，从 SAP Web IDE：右键单击项目 → Build → Build Project 以创建/更新预加载文件。

应用程序首次加载需要一分多钟

App takes more than a minute to load for the first time

sapui5

ui5-tooling

index.html

控制器模块

XML 命名空间

技术优化

心理优化