SAP UI5 基于 MVC 架構，一個典型的 SAP UI5 工程包含了 controller，view，component和 html 這幾種不同類型的資源文件：

這種資源文件細粒度的拆分，其優點是每個文件職責清晰，符合開發人員對 MVC 傳統架構的認識，因而在項目開發過程中，有助于SAP UI5 開發人員，在正確的位置編寫正確的代碼。

然而，開發結束后，切換到生產模式運行時，這種拆分方式會給SAP UI5的性能造成一些消極的影響。

每個資源文件需要一個單獨的網絡請求去加載。

以 Jerry 的一個用于SAP UI5學習的腳手架應用，沒有任何后臺API的依賴 為例，其加載的網絡請求如下圖所示：

和很多其他的前端框架一樣，SAP UI5 也引入了 bundling 機制，將這些單獨的開發資源，打包成一個整體，文件名為 component-preload.js.

Component-preload.js絕不是簡單地將SAP UI5項目工程里各個文件的內容單純地拼接出來。在內容拼接基礎上，還施加了Minification和Ugification的過程。

Minification：刪除代碼中的注釋和空行，空白，以減小最終生成的Component-preload.js的尺寸。

Ugification：代碼混淆，將原始代碼中的變量名轉換成單個字符，從而進一步減少Component-preload.js的尺寸。

看一個 SAP UI5 Component-preload.js的具體例子。

在SAP UI5項目文件里缺少Component-preload.js時，我的UI5腳手架應用，總共發起了43個網絡請求，頁面加載時間為 11.95秒：

而通過 SAP UI5 打包工具生成Component-preload.js后，加載該應用一共用了32個網絡請求，減少了11個請求，頁面加載時間減少到10秒。

最后，SAP UI5 的 Component-preload.js 文件如何生成呢？網絡上提供了很多工具，Jerry 這篇文章介紹了我覺得相對來說步驟比較簡單的一種辦法：

一個好用的 SAP UI5 本地打包(build)工具

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的什么是 SAP UI5 的 Component-preload.js, 什么是Minification和Ugification的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。