What is vendor file in angular?

以 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 中。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: