【问题标题】:App takes more than a minute to load for the first time应用程序首次加载需要一分钟以上
【发布时间】:2020-10-21 22:56:06
【问题描述】:

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

当我在 Chrome 控制台中运行 Performance 时,它​​显示脚本编写需要太多时间。如何减少应用的初始加载时间?

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>

【问题讨论】:

标签: sapui5 ui5-tooling


【解决方案1】:

技术优化

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

您绝对可以通过以下方式大量减少应用的初始加载时间:

上述几点普遍适用于所有 UI5 应用程序,不仅适用于 SmartTable。
有关其他性能相关指南,请参阅 Performance Checklist

心理优化

除了技术优化,感知管理也应该考虑在内。

  1. 重要的是要注意perceived performance 是真正的性能。毫秒数并不重要。
  2. 为了表明某事正在发生,我们可以利用 busy stateBusyIndicatorBusyDialogProgressIndicator 如下图所示:

来源:Psychological Time: Tolerance Management

【讨论】:

  • 非常感谢!! ..我会尽力让你知道。
  • @HarithaPerumal SmartTable 只是一个例子。您可能有其他控件的依赖库没有被预加载。请也找他们。通常,Chrome 开发工具中的 Network 面板会显示哪些库是按需同步加载的,如果没有预加载,会发生什么情况。
  • 我已经预加载了依赖项并添加了 Component-preload.js。现在第一次只需要 6 秒。谢谢您的答复 !!! :)
  • @HarithaPerumal 当您从 Web IDE 在 FLP 上部署应用程序时,不应手动创建 Component-preload.js(因为 Web IDE 会自动创建文件为你)。还是您使用的是其他 IDE?
  • 我正在使用 Web IDE。当我将应用程序部署到 SAP 云平台时,它创建了一个 dist 文件夹,其中包含 Component-preload.js 文件。
【解决方案2】:

虽然一分钟的时间太长,但 UI5 应用在第一次运行时加载时间较长是正常的,因为它会从 UI5 服务器下载 UI5 库 -- 下载这些库后,它们会缓存到您的因此,在接下来的运行中,它会更快。

【讨论】:

  • 感谢您的回复。我想我可以减少到至少 20 到 30 秒。有可能吗?
  • 即使对于 UI5 应用程序来说,花一分钟也绝对不是“正常的”。
【解决方案3】:

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

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-09-19
  • 2021-01-30
  • 1970-01-01
  • 2023-02-17
相关资源
最近更新 更多