我正在构建一个自定义 SAPUI5 应用程序，其中包含七个图表（sap.viz.ui5.controls.VizFrame）在页面的标题内容中（嵌套在sap.suite.ui.commons.ChartContainer）和网格表（sap.ui.table.Table）在主要内容区域。图表和表格的数据由 OData V2 服务提供，并且该应用程序在最新版本 (1.81.0) 上独立运行。
问题是应用程序的加载时间较长。需要 7 到 20 秒。这对于“更复杂”的应用程序来说很常见吗？我试图找到瓶颈，但一切看起来都很好。许多网络请求都会被缓存（它们需要 0 毫秒），但是它们之间有轻微的延迟，我不明白为什么。此外，尽管我使用的是data-sap-async="true" in my index.html file:
[弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请检查https://xhr.spec.whatwg.org/。 [syncXHRFix-dbg.js:211:15]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading - Customer Fact Sheet</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-resourceroots='{"com.schott.fiori.customerfactsheet.customerfactsheet-fiori3": "./"}'
data-sap-ui-compatVersion="edge"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted">
</script>
<link href="https://www.schott.com/static/assets/gfx/favicon/SCHOTT_16.png" rel="shortcut icon" type="image/png" />
</head>
<body class="sapUiBody">
<div data-sap-ui-component data-name="com.schott.fiori.customerfactsheet.customerfactsheet-fiori3" data-id="container" data-settings='{"id" : "customerfactsheet-fiori3"}'></div>
</body>
</html>
{
"_version": "1.12.0",
"sap.app": {
"id": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "servicecatalog.connectivityComponentForManifest",
"version": "0.0.0"
},
"dataSources": {
"YODATA_SD_CFS_MATRIX_SRV": {
"uri": "/sap/opu/odata/sap/YODATA_SD_CFS_MATRIX_SRV/",
"type": "OData",
"settings": {
"localUri": "localService/metadata.xml"
}
}
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.view.Main",
"type": "XML",
"async": true,
"id": "Main"
},
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": false
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.i18n.i18n"
}
},
"": {
"type": "sap.ui.model.odata.v2.ODataModel",
"settings": {
"defaultOperationMode": "Client",
"defaultBindingMode": "OneWay",
"defaultCountMode": "Request"
},
"dataSource": "YODATA_SD_CFS_MATRIX_SRV",
"preload": true
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [{
"name": "RouteMain",
"pattern": "RouteMain",
"target": ["TargetMain"]
}],
"targets": {
"TargetMain": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "Main",
"viewName": "Main"
}
}
}
},
"sap.platform.hcp": {
"uri": "webapp",
"_version": "1.1.0"
}
}
正如“网络”选项卡所示，有许多模块按顺序一一加载，其中许多模块甚至通过同步 XHR 加载。最重要的任务是避免使用同步 XHR。
确保没有调试模式，sap-ui-debug, sap-ui-xx-componentPreload or sap-ui-xx-libraryPreloadFiles不必要地活跃。
确保异步模块加载处于活动状态：
data-sap-ui-async="true"在引导脚本中（id="sap-ui-bootstrap").我看到在manifest.json仅声明了少数库。然而，根据“网络”选项卡，该应用程序使用来自其他库的控件，这些控件未在dependencies。参考如何避免将 UI5 控件作为单个模块加载？为决议。
对于独立应用程序：预加载第三方 JS 文件，即not预先异步地作为应用程序包或库包的一部分。如果您检查引发者在“网络”选项卡中的列中，您可以检测通过同步 XHR 加载的更多模块。将这些模块添加到data-sap-ui-modules应该避免它：
<script id="sap-ui-bootstrap"
src="..."
data-sap-ui-modules="sap/ui/thirdparty/datajs,sap/ui/thirdparty/require"
data-sap-ui-...="..."
></script>
The sap/ui/thirdparty/datajs is required by v2.ODataModel. The sap/ui/thirdparty/require module by the sap.viz library. Both modules are usually fetched via loadSyncXHR. The above snippet fixes it. You might find more such modules.
总的来说，上述几点应该已经显着改善了初始加载时间。有关更多性能指南，请浏览绩效检查表.
为了减少请求数量，请考虑完全放弃 i18n 支持if该应用程序仅针对使用相同语言的特定人群。对 i18n 文本包的多个请求成本高昂，如果配置不正确，可能会导致同步 XHR。那里is一种异步加载 i18n 资源并指定应用程序支持的区域设置的方法，但这是另一个主题了。
countMode to "None"在聚合绑定信息中，其中$count并不是真正需要的，因为$count后端计算往往成本高昂。defaultOperationMode被设定为"Client"在您的情况下，它会立即获取所有实体并减慢初始应用程序加载速度。相反，利用延迟加载应用内容, $filter查询，则growing特色于sap.m.ListBase控制，以及sap.ui.table.Table控制（如果适用）。参考“桌子：我应该选择哪一张？”
$metadata并尽早添加注释preload: true to the /sap.ui5/models/<model name>/部分。"": {
"dataSource": "MyV2Source",
"settings": {
"defaultBindingMode": "TwoWay",
"preliminaryContext": true
},
"preload": true
}
通过 UI5 工具构建应用程序包这减少了服务器请求的数量，如果是独立构建，也减少了应用程序的大小。