天天看點

Angular 應用裡的 vendor.js 是用來幹什麼的?

以 SAP 電商雲 UI 的 Angular 頁面為例,這個 vendor.js 有超過 17 萬行代碼:

Angular 應用裡的 vendor.js 是用來幹什麼的?
Angular 應用裡的 vendor.js 是用來幹什麼的?

此檔案包含導入您的應用程式 (app.module) 的所有庫,包括 Angular 庫。 導入到您的應用程式中的第三方庫也會被編譯到此檔案中(例如 lodash、moment 等)。

這個檔案在開發編譯(ng build)之後很大,因為它包含在浏覽器中編譯 Angular 所需的一切。 在将您的應用程式釋出到生産環境之前,始終運作 prod 建構 (ng build –prod)。 prod 建構運作 Ahead of Time (AoT) 編譯并執行 tree-shaking。

main.js

包含應用程式的 action 相關代碼,比如 Effect 實作。

Angular 應用裡的 vendor.js 是用來幹什麼的?

同樣的 effect 實作,在 vendor.js 裡找不到。

Angular 應用裡的 vendor.js 是用來幹什麼的?

在浏覽器下載下傳并運作代碼之前的建構階段,Angular 提前 (AOT) 編譯器将您的 Angular HTML 和 TypeScript 代碼轉換為高效的 JavaScript 代碼。在建構過程中編譯您的應用程式可在浏覽器中提供更快的渲染。

除了上面的内容,vendor bundle JS 還包含什麼?制作“供應商捆綁包”。供應商包包含每個應用程式功能所依賴的所有架構和庫。通過将所有這些代碼建構到單個包中,用戶端可以有效地緩存包,并且您隻需要在架構或庫更新時重新建構包。是以,vendor.js 裡不包含自開發代碼。

什麼是 angular bundle?

捆綁是将多個檔案合并為一個檔案的過程。在我們的例子中,Angular 等第三方庫和其他依賴項将被捆綁到 vendor.bundle.js 中。

繼續閱讀