Angular 应用里的 vendor.js 是用来干什么的?

简介: Angular 应用里的 vendor.js 是用来干什么的?

以 SAP 电商云 UI 的 Angular 页面为例,这个 vendor.js 有超过 17 万行代码:



image.png



此文件包含导入您的应用程序 (app.module) 的所有库,包括 Angular 库。 导入到您的应用程序中的第三方库也会被编译到此文件中(例如 lodash、moment 等)。


这个文件在开发编译(ng build)之后很大,因为它包含在浏览器中编译 Angular 所需的一切。 在将您的应用程序发布到生产环境之前,始终运行 prod 构建 (ng build –prod)。 prod 构建运行 Ahead of Time (AoT) 编译并执行 tree-shaking。


main.js

包含应用程序的 action 相关代码,比如 Effect 实现。


image.png


同样的 effect 实现,在 vendor.js 里找不到。


image.png


在浏览器下载并运行代码之前的构建阶段,Angular 提前 (AOT) 编译器将您的 Angular HTML 和 TypeScript 代码转换为高效的 JavaScript 代码。在构建过程中编译您的应用程序可在浏览器中提供更快的渲染。


除了上面的内容,vendor bundle JS 还包含什么?制作“供应商捆绑包”。供应商包包含每个应用程序功能所依赖的所有框架和库。通过将所有这些代码构建到单个包中,客户端可以有效地缓存包,并且您只需要在框架或库更新时重新构建包。因此,vendor.js 里不包含自开发代码。


什么是 angular bundle?


捆绑是将多个文件合并为一个文件的过程。在我们的例子中,Angular 等第三方库和其他依赖项将被捆绑到 vendor.bundle.js 中。



相关文章
|
4月前
|
前端开发 JavaScript 开发者
什么是 Angular 框架中的 Zone.js
什么是 Angular 框架中的 Zone.js
29 0
|
7月前
|
缓存 资源调度 UED
Angular 应用构建完成后 vendor.js 文件的使用场合
Angular 应用构建完成后 vendor.js 文件的使用场合
53 0
|
3月前
|
vr&ar
ar.js
ar.js
37 0
|
7月前
|
Web App开发 JavaScript 前端开发
关于 Angular 和 Node.js 版本的问题
关于 Angular 和 Node.js 版本的问题
137 0
|
8月前
Angular 项目里使用 scss 文件的一些技巧分享
Angular 项目里使用 scss 文件的一些技巧分享
87 0
Angular 项目里使用 scss 文件的一些技巧
Angular 项目里使用 scss 文件的一些技巧
127 0
Angular 项目里使用 scss 文件的一些技巧
|
缓存 JavaScript 前端开发
Angular 应用里的 vendor.js 是用来干什么的?
Angular 应用里的 vendor.js 是用来干什么的?
240 0
Angular 应用里的 vendor.js 是用来干什么的?
|
Web App开发 JavaScript 前端开发
Angular.js vs Ember.js
Discourse的推出在整个社区赚足了眼球。Discourse选择Ember.JS作为前端MVC框架,其开发者Robin Ward写了博客分享选择Ember.js的理由
131 0
Angular.js vs Ember.js
Angular 支持 SCSS
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
789 0