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

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.

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.