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的原创文章，尽在：“汪子熙”:

Angular 应用里的 vendor.js 是用来干什么的？相关推荐

Angular 开发里的 polyfills.js、runtime.js、styles.js 和 vendor.js 是用来做什么的
what is main.js and main.js.map? and other stuff 问题 chunk {main} main.js, main.js.map (main) 24.5 kB ...
Angular应用里setTimeout被如何被monkey patched的
monkey patched: monkey patch指的是在运行时动态替换,一般是在startup的时候. 下面的测试代码可以让我们弄清楚,浏览器支持的原生函数setTimeout,是如何在Ang ...
web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包
Html css js image txt web项目中放在 Webapp 在springboot项目中静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...
Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
Angular应用里的tsconfig.app.json
tsconfig.app.json是tsconfig.json的扩展: 在应用工程文件angular.json里的tsConfig字段处被引用: ng build后的输出: 2020年10月4日国庆节 ...
Angular应用里的Template Reference变量
Angular应用里的Template Reference Variable,模板引用变量,用于创建一个对模板里DOM元素或者Angular指令的引用. 使用#号定义一个模板引用变量. 看个具体的例子 ...
Angular应用里HTTP请求的错误处理
在需要进行错误处理的Angular应用里,从rxjs里导入catchError: import { catchError, map, tap } from 'rxjs/operators'; getH ...
网页里如何使用js禁用控制台
网页里如何禁用右击事件?使用jQuery,几句代码就可以搞定了 document.oncontextmenu = function(){return false;} 简单示例: js实现: <! ...
uniapp 微信小程序打包 vendor.js过大导致打包超过2M
1.分包加载,小程序限制一个包2M,可以分9个子包,整包共计不能超出20M,这一步很简单,如果看文档感觉枯燥的可以参考uview框架的demo,因为这个demo就使用了小程序的分包机制,demo链接( ...

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

main.js

Angular 应用里的 vendor.js 是用来干什么的？相关推荐

最新文章

热门文章