What is vendor file in angular?

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

此文件包含導(dǎo)入您的應(yīng)用程序 (app.module) 的所有庫，包括 Angular 庫。 導(dǎo)入到您的應(yīng)用程序中的第三方庫也會被編譯到此文件中（例如 lodash、moment 等）。

這個文件在開發(fā)編譯（ng build）之后很大，因為它包含在瀏覽器中編譯 Angular 所需的一切。 在將您的應(yīng)用程序發(fā)布到生產(chǎn)環(huán)境之前，始終運行 prod 構(gòu)建 (ng build –prod)。 prod 構(gòu)建運行 Ahead of Time (AoT) 編譯并執(zhí)行 tree-shaking。

main.js

包含應(yīng)用程序的 action 相關(guān)代碼，比如 Effect 實現(xiàn)。

同樣的 effect 實現(xiàn)，在 vendor.js 里找不到。

在瀏覽器下載并運行代碼之前的構(gòu)建階段，Angular 提前 (AOT) 編譯器將您的 Angular HTML 和 TypeScript 代碼轉(zhuǎn)換為高效的 JavaScript 代碼。在構(gòu)建過程中編譯您的應(yīng)用程序可在瀏覽器中提供更快的渲染。

除了上面的內(nèi)容，vendor bundle JS 還包含什么？制作“供應(yīng)商捆綁包”。供應(yīng)商包包含每個應(yīng)用程序功能所依賴的所有框架和庫。通過將所有這些代碼構(gòu)建到單個包中，客戶端可以有效地緩存包，并且您只需要在框架或庫更新時重新構(gòu)建包。因此，vendor.js 里不包含自開發(fā)代碼。

什么是 angular bundle？

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular 应用里的 vendor.js 是用来干什么的？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。