从单个 JS 文件引导 OpenUI5答案

【问题标题】：Bootstraping OpenUI5 from single JS file从单个 JS 文件引导 OpenUI5
【发布时间】：2020-01-11 22:51:39
【问题描述】：

OpenUI5 文档建议使用从 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>

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

sap-ui-core.js
sap/ui/core/library.js（为什么？）
sap/m/library.js
sap/ui/table/library.js

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

【问题讨论】：

UI5 不像 jQuery 那样简单的库，而是一个复杂的框架。将所有内容放在一个文件中意味着单个文件的大小可能为 100 MB 或更大。这就是为什么控件（例如按钮、表格、布局）被分成单独的库的原因。然后框架会根据您的需要加载这些库。
你想达到什么目的？实际上，浏览器将加载更多文件以及上述文件 - 有些可能是额外的 js 文件。目前尚不清楚您真正关心的是什么 - 大多数网页都会加载大量文件，包括脚本。您能否进一步澄清一下？
五个必要文件：sap-ui-core.js、sap/ui/core/library-preload.js、sap/m/library-preload.js、sap/ui/table/library- preload.js 和 sap/ui/unified/library-preload.js 的大小为 1,28 MB 而不是 100 MB。
@Bernard 我正在使用 webpack，我的应用程序最终只有一个 js 和一个 css 文件。但是 OpenUI5 给了我额外的 5 个 http 请求。
下面的答案有帮助吗？或者缺少什么？如果需要，我可以扩展答案

标签： sapui5 ui5-tooling

【解决方案1】：

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

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

data-sap-ui-async="true" // available since 1.58.2 --&gt; Replaces preload="async" <strong>*</strong>

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

* 前提条件：Is Your Application Ready for Asynchronous Loading?

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

是的；通过自包含构建，您可以通过将所需模块捆绑到单个文件中来减小应用程序的大小以及请求数量sap-ui-custom.js

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

有关官方文档，请参阅 openui5-sample-app 和 UI5 tooling。

【讨论】：