以 SAP 電商雲 UI 的 Angular 頁面為例,這個 vendor.js 有超過 17 萬行代碼:
此檔案包含導入您的應用程式 (app.module) 的所有庫,包括 Angular 庫。 導入到您的應用程式中的第三方庫也會被編譯到此檔案中(例如 lodash、moment 等)。
這個檔案在開發編譯(ng build)之後很大,因為它包含在浏覽器中編譯 Angular 所需的一切。 在将您的應用程式釋出到生産環境之前,始終運作 prod 建構 (ng build –prod)。 prod 建構運作 Ahead of Time (AoT) 編譯并執行 tree-shaking。
main.js
包含應用程式的 action 相關代碼,比如 Effect 實作。
同樣的 effect 實作,在 vendor.js 裡找不到。
在浏覽器下載下傳并運作代碼之前的建構階段,Angular 提前 (AOT) 編譯器将您的 Angular HTML 和 TypeScript 代碼轉換為高效的 JavaScript 代碼。在建構過程中編譯您的應用程式可在浏覽器中提供更快的渲染。
除了上面的内容,vendor bundle JS 還包含什麼?制作“供應商捆綁包”。供應商包包含每個應用程式功能所依賴的所有架構和庫。通過将所有這些代碼建構到單個包中,用戶端可以有效地緩存包,并且您隻需要在架構或庫更新時重新建構包。是以,vendor.js 裡不包含自開發代碼。
什麼是 angular bundle?
捆綁是将多個檔案合并為一個檔案的過程。在我們的例子中,Angular 等第三方庫和其他依賴項将被捆綁到 vendor.bundle.js 中。