sapui5 - 应用程序首次加载需要一分钟以上
问题描述
我已经在 SAPUI5 中完成了一个应用程序并部署在 FLP 中。第一次加载需要一分钟多的时间,之后只需 2 到 3 秒。
当我在 Chrome 控制台中运行性能时,它显示脚本编写需要太多时间。如何减少应用程序的初始加载时间?
索引.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>
解决方案
技术优化
我看到你在使用sap.ui.comp.smarttable.SmartTable
时没有预加载它的依赖项。
您绝对可以通过以下方式大幅减少应用程序的初始加载时间:
$metadata
如如何更快地加载?sap.ui.comp.smarttable.SmartTable
- 将库依赖项从
data-sap-ui-libs
移至sap.ui5/dependencies/libs
.manifest.json
请参阅Bootstrapdata-sap-ui-libs
与清单的sap.ui5/dependencies/libs
. - 识别和减少同步 XHR 的数量,如如何避免“主线程上的同步 XMLHttpRequest”中所述?
- 最后,使用UI5 Tooling 的
ui5 build
命令(根据用例使用适用的命令选项)在部署应用程序之前捆绑并最小化所有相关组件文件。默认情况下,Component-preload.js
将生成一个名为的包,它会减少应用程序的整体大小和运行时中的请求数。
上述几点普遍适用于所有 UI5 应用程序,不仅适用于 SmartTable。
有关其他与性能相关的指南,请参阅性能检查表。
心理优化
除了技术优化外,还应考虑感知管理。
- 重要的是要注意感知的性能是真实的性能。毫秒数并不是真正重要的。
- 为了指示某事正在发生,我们可以根据下图使用
busy
state、BusyIndicator、BusyDialog和 ProgressIndicator:
资料来源:心理时间:宽容管理
推荐阅读
- c# - 提供数据到
xml xml 对于 C# Web 服务 - java - 更改抽屉布局项目
- android - 在黑白之间切换状态栏文本颜色
- css - 结合 vue 材料和 vue cli webpack 模板时,表单元素显示为透明
- angular - Angular 6 - 从 ReactiveForm 访问数组中的数组
- android - 启用在地图框上显示高尔夫球车路径以及行驶路径
- amazon-web-services - 我的应用所在的区域对 Amazon SES 免费套餐是否重要?
- reflection - 我可以在纯 Kotlin 中通过类名实例化一个对象吗
- assembly - 如何使用 malloc 空间执行代码而不是存储数据
- javascript - 使用 Jest 测试 DOMParser