What are the roles of various files produced in angular bundle (AoT compilation)

I ran ng build --prod --aot in my current angular4 project and I got following files in my dist folders.

  1. inline.6405cab307cfc3c6a636.bundle.js : 2 KB
  2. main.a799c9fd4322567743dc.bundle.js : 35 KB
  3. polyfills.b72d4efc376613f94934.bundle.js:63 KB
  4. scripts.6072021e6a4e32c07d7e.bundle.js:963 KB
  5. styles.737751caddf6a44d0993.bundle.css:146 KB
  6. vendor.c85bb23c3f86ba86be80.bundle.js:548 KB
  7. 0.01d7070ba0efe736c78d.chunk.js: 129 KB

I would like to know:

  1. What kind of code goes in each of these files. I want to know this because I want to be able to control the size of each file.
  2. Which of these files are necessary for page load in the browser.
  3. About scripts.6072021e6a4e32c07d7e.bundle.js : I created a new ng4 project and compiled that. There was no such files in the dist. However this file is produced during compilation of my current project (and weights the heaviest). Can you answer why?

1 answer

  • answered 2017-10-11 10:02 echonax

    1) scripts.abc.bundle.js: generated from the scripts array inside your .angular-cli.json file https://github.com/angular/angular-cli/wiki/stories-global-scripts

    styles.abc.bundle.css: generated from the styles array inside your .angular-cli.json file

    vendor.abc.bundle.js: generated from the node_modules

    polyfills.abc.bundle.js: generated for older browser compatibility (like IE 9)

    main.abc.bundle.js: your main components code

    inline.abc.bundle.js: for webpack imports.

    chunk.js: for chunk fragments like .png files.

    2) All of them

    3) Since in a new project the scripts array will be empty, there won't be any bundle to generate.