从单个 JS 文件引导 OpenUI5 [英] Bootstraping OpenUI5 from single JS file

问题描述

OpenUI5 文档建议使用从 CDN 加载的库开始工作:

<script id="sap-ui-bootstrap"类型=文本/javascript"src="https://openui5.hana.ondemand.com/1.42.6/resources/sap-ui-core.js"data-sap-ui-theme="sap_belize"data-sap-ui-libs="sap.m,sap.ui.table"></script>

不幸的是，这种方法意味着在启动时加载级联 4 个脚本:

• sap-ui-core.js
• sap/ui/core/library.js(为什么?)
• sap/m/library.js
• sap/ui/table/library.js

有没有办法将这四个库捆绑到一个脚本文件中?

解决方案

不幸的是，这种方法意味着在启动时加载级联多个脚本:

级联行为主要是由于缺少告诉框架异步加载 UI5 库和其他模块的选项.为了修复它，请添加以下属性:

data-sap-ui-async="true"//从 1.58.2 开始可用 --> 替换 preload="async" *

data-sap-ui-preload="async"//1.58.1 及以下版本

* 先决条件:

在上面的截图中，例如，sap-ui-custom.js 只包含来自sap.ui.core-、sap 的所需模块.m-、sap.ui.table- 和 sap.ui.unified- 库，此外还有与应用程序相关的资源，例如控制器、视图、等等.

参见 openui5-sample-app 以及用于官方文档的 UI5 工具.

OpenUI5 documentation suggests starting work by using a library loaded from CDN:

<script id="sap-ui-bootstrap"
    type="text/javascript"
    src="https://openui5.hana.ondemand.com/1.42.6/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_belize"
    data-sap-ui-libs="sap.m,sap.ui.table"></script>

Unfortunately, this approach means load cascading 4 scripts on startup:

• sap-ui-core.js
• sap/ui/core/library.js (why ?)
• sap/m/library.js
• sap/ui/table/library.js

Is there way to bundle this four libraries into one script file?

解决方案

Unfortunately, this approach means load cascading multiple scripts on startup:

The cascading behavior is mostly due to missing an option that tells the framework to load UI5-libraries and other modules asynchronously. In order to fix it, please add the following attribute too:

data-sap-ui-async="true" // available since 1.58.2 --> Replaces preload="async" *

data-sap-ui-preload="async" // for 1.58.1 and below

* Prerequisite: Is Your Application Ready for Asynchronous Loading?

---

Is there way to bundle these four libraries into one script file?

Yes; with a self-contained build, you can reduce the size of your application as well as number of requests by bundling the required modules into a single file sap-ui-custom.js

In the above screenshot, for example, sap-ui-custom.js contains only the required modules from sap.ui.core-, sap.m-, sap.ui.table-, and sap.ui.unified-library, in addition to application related resources such as the controllers, views, etc..

See openui5-sample-app and the UI5 tooling for official documentation.

这篇关于从单个 JS 文件引导 OpenUI5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！