The angular-cli is a great way to build your Angular app but what it does can be a mystery. What are those files it generates?
Let’s see…
inline.bundle.js
This is a webpack loader. A tiny file with Webpack utilities that are needed to load the other files.
vendor.bundle.js
This file contains any libraries imported into your app (app.module), including the Angular libraries. Third party libraries imported into your app also get compiled into this file (e.g. lodash, moment etc).
*Warning* this file is HUGE after a dev compile (ng build) because it contains everything required to compile Angular in the browser. Always run a prod build (ng build –prod) before releasing your app to production. A prod build runs the Ahead of Time (AoT) compilation and performs tree-shaking.
main.bundle.js
This is where the action happens. This file contains all your code.
polyfills.bundle.js
This one should be self explanatory. It contains all the polyfills you declare in your polyfills.ts file.
scripts.build.js
This one should also be self explanatory. It contains the scripts you declare in the scripts section of your angular-cli.json file:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/js/alert.js", "../Scripts/global-error-handler.js", "../Scripts/responsive-bootstrap-toolkit.js" ],
Ah, that explains a lot. Thanks.
That’s great information, I always had a question that why my bundle.js file is so huge. All the time it was carrying JIT compiler.
Can you update your article for Angular 6. As I don’t see inline.bundle.js but runtime.js and style.js
Hi I am new to Angular.. there is a set of reference in my Application I have no idea why it is here ,
In vendor.js “OnLeave(Zone)” method overriding few binded values in view . main.js not updating if I do ng-build.
http://runtime.js
http://polyfills.js
http://styles.js
http://vendor.js
http://main.js
Please help me …