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.
bundle. js which includes all the scripts to fill the gap between the version of Javascript that Angular needs and the version of Javascript supported by most browsers. polyfills.bundle.js. Here we can see👇 another bundle which is a main. bundle.
vendors. bundle. js bundles every code imported by your app module: this includes local imports like components and services, but also third-party libs like lodash. It basically contains everything, so it's more interesting to see what's not in this file, mainly: inline.
The vendor. js contains npm modules being used in the app. module. ts . The multiple initialization may be caused by Module lazy loading, but it is hard to say.
scripts.bundle.js represents scripts section that you configured in .angular-cli.json. vendor. bundle. js contains npm modules you are referencing in your app.
Let's see:
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.
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
.
Your own code, and anything else you imported etc, as explained in previous point.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With