什麼是 SAP UI5 的 Component-preload.js, 什麼是Minification和Ugification

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的原創文章，盡在："汪子熙":