Angular 2/4: what is the difference between the scripts.bundle.js and the vendor.bundle.js?

Question

Angular 4: after running the command: ng build I have this structure

0.chunk.js      favicon.ico           polyfills.bundle.js.map
0.chunk.js.map  index.html            scripts.bundle.js
1.chunk.js      inline.bundle.js      scripts.bundle.js.map
1.chunk.js.map  inline.bundle.js.map  styles.bundle.js
2.chunk.js      main.bundle.js        styles.bundle.js.map
2.chunk.js.map  main.bundle.js.map    vendor.bundle.js
assets          polyfills.bundle.js   vendor.bundle.js.map

What is the difference between the scripts.bundle.js and the vendor.bundle.js?

I think difference is, that the scripts.bundle.js holds all external .js files and the vendor.bundle.js holds all created modules.

EDIT

but I can import .js files from node_modules into the vendor.bundle.js and the scripts.bundle.js. What the best approach is: importing .js files into modules or adding them into the .angular-cli.jsons scripts object?

~Thanks a lot for your help!

Answer 1

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.module.

The better way to figure out what is inside your bundles is to use webpack-bundle-analyzer

Add "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json", to your package.json and once you npm install webpack-bundle-analyzer just run npm run analyze

The purpose of scripts section of .angular-cli.json is to handle legacy scripts but also you can use that to improve your lazy loading story. Say only your chunks relying on some particular npm module. In such case there is no need to have that npm module placed in to vendor.bundle.js as it can be loaded just before the related chunk is loaded.

More details on scripts section on https://github.com/angular/angular-cli/wiki/stories-global-scripts