What is vendor.js in Angular applications for?

What is vendor file in angular?

Take the Angular page of SAP e-commerce cloud UI as an example, this vendor.js has more than 170,000 lines of code:

This file contains all the libraries imported into your application (app.module), including the Angular library. Third-party libraries imported into your application will also be compiled into this file (such as lodash, moment, etc.).

This file is huge after development compilation (ng build) because it contains everything needed to compile Angular in the browser. Before releasing your application to the production environment, always run the prod build (ng build –prod). The prod build runs Ahead of Time (AoT) to compile and execute tree-shaking.

main.js

Contains the action-related code of the application, such as Effect implementation.

The same effect implementation cannot be found in vendor.js.

In the build phase before the browser downloads and runs the code, the Angular ahead of time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code. Compiling your application during the build process provides faster rendering in the browser.

In addition to the above, what else does vendor bundle JS contain? Make a "supplier bundle". The vendor package contains all the frameworks and libraries that each application function depends on. By building all this code into a single package, the client can effectively cache the package, and you only need to rebuild the package when the framework or library is updated. Therefore, vendor.js does not contain self-developed code.

What is an angular bundle?

Bundling is the process of combining multiple files into one file. In our example, third-party libraries such as Angular and other dependencies will be bundled into vendor.bundle.js.

More original articles by Jerry, all in: "Wang Zixi":