What these angular-cli do: inline.bundle.js, vendor.bundle.js, main.bundle.js?

Question

If I check the index.html file of angular 2 project created with angular-cli, I can see the page only include 3 files from dist folder:

inline.bundle.js
vendor.bundle.js
main.bundle.js

But now I am trying to understand what each file do. I wrote component with the angular-cli, I have downgrade so I can use it in another app written with angular 1. If I just add these 3 files to my index.html, plus adding app.module.ts file, seems like I have upgrade my app and everything is working. I'm trying to understand why, because the google angular tutorial does not talk about angular-cli and how it can help with the migration.

Answer 1

Let's see:

inline.bundle.js

This is a webpack loader. A tiny file with Webpack utilities that are needed when loading other files.

Eventually this will be written inside the index.html file itself and not being generated as a separate file at all.

vendor.bundle.js

This is generated by default in dev mode, and ignored by default in prod mode (ng build -prod or ng serve -prod).

It includes the Angular libraries with little or no modification. This is to speed up the build process. Also some people think it's a good idea to keep these in a separate file when it doesn't change much and then it can be cached for longer.

The typical Angular approach though is to merge them into the main bundle, and when doing so, run Webpack tree-shaking, which removes any EcmaScript / TypeScript modules that were never imported from any other modules in your app and its imports. This means the final bundle is much smaller. For example, when running Ahead of Time compiler (AoT), the Angular Compiler gets tree-shaked away.

You can explicitly control generating a separate vendor bundle or not by setting the argument --vendor-chunk.

main.bundle.js

Your own code, and anything else you imported etc, as explained in previous point.

Answer 2

As of Angular 6, the generated files don’t have .bundle or .chunk in their names anymore. main.bundle.js is now main.js, admin.module.chunk.js is now admin-admin-module-ngfactory.js, reflecting that my AdminModule is in an admin directory in my project. That’s to allow people to have two modules with the same name in different locations. And inline.bundle.js has been renamed runtime.js.