[英]How to find loading bottleneck of a slow-loading SAPUI5 app
我建立一个自定义的应用程序SAPUI5它由七个图(的sap.viz.ui5.controls.VizFrame
在页面的页眉内容(嵌套在里面) sap.suite.ui.commons.ChartContainer
)和网格表( sap.ui.table.Table
)在主要内容区域。 图表和表格的数据由 OData V2 服务提供,该应用程序在最新版本 (1.81.0) 上独立运行。
问题是应用程序的加载时间长。 需要 7 到 20 秒。 这对于“更复杂”的应用程序来说是常见的吗? 我试图找到瓶颈,但一切看起来都很好。 许多网络请求被缓存(它们需要 0 毫秒),但是,它们之间有轻微的延迟,我不明白为什么。 此外,尽管我在index.html
文件中使用了data-sap-async="true"
,但控制台中还有以下警告:
[弃用] 主线程上的同步 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。
我在manifest.json
看到只声明了少量库。 但是,根据 Network 选项卡,该应用程序使用来自其他库中的控件,这些控件未在dependencies
声明。
所以应该是:
"sap.ui5": { "dependencies": { "libs": { "sap.ui.core": {}, "sap.m": {}, "sap.ui.table": {}, "sap.f": {}, "sap.ui.unified": {}, "sap.ui.layout": {}, "sap.viz": {}, "sap.suite.ui.commons": {} },
一些库被其他库传递需要(例如sap.ui.table
需要sap.ui.unified
)。 src然后您可以添加"sap.ui.unified": { lazy: true }
如果该库未直接使用。
预先异步预加载通常通过loadSyncXHR
加载的第三方模块。
如果您检查 Network 选项卡中的Initiator列,您可以检测到更多通过同步 XHR 加载的模块。 将这些模块添加到data-sap-ui-modules
应该避免它:
<script id="sap-ui-bootstrap" data-sap-ui-modules="sap/ui/thirdparty/datajs,sap/ui/thirdparty/require" ...>
v2.ODataModel
需要sap/ui/thirdparty/datajs
v2.ODataModel
sap/ui/thirdparty/datajs
。 sap.viz
库的sap/ui/thirdparty/require
sap.viz
sap/ui/thirdparty/require
模块。 这两个模块通常通过loadSyncXHR
获取。 上面的代码片段修复了它。 您可能会发现更多此类模块。
总的来说,以上几点应该已经显着改善了初始加载时间。 如需更多性能指南,请查看性能检查表。
为了减少请求数量,如果应用程序仅针对使用相同语言的特定人群,请考虑完全放弃 i18n 支持。 对 i18n 文本包的多个请求不仅大小昂贵,而且在加载时会阻塞其他请求,因为默认情况下它们也是通过同步 XHR 加载的。 有一种方法,可以异步和同时指定其语言环境中的应用支持,但那是另一个话题加载它们。
如果不需要,考虑将计数模式设置为None
,因为$count
计算在后端往往成本很高。 此外,操作模式Client
获取所有实体。 考虑延迟加载它们。
"": {
"dataSource": "MyV2Source",
"settings": {
"defaultOperationMode": "Default",
"defaultCountMode": "None",
"defaultBindingMode": "TwoWay",
"preliminaryContext": true
},
"preload": true
},
关于preliminaryContext
:请参阅优化依赖绑定。
items: { // e.g.
path: '/MySet',
parameters: {
countMode: 'None',
operationMode: 'Client' | 'Default' | 'Server' (see API ref)
}
}
API参考: https : //openui5.hana.ondemand.com/api/sap.ui.model.odata.v2.ODataListBinding
在部署应用程序之前,通过以下命令构建应用程序应该会大大减少应用程序的大小:
ui5 build self-contained -a
来自https://github.com/SAP/openui5-sample-app#option-2-self-contained-build
这目前仅适用于独立应用程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.