Bundling consolidates compiled application modules and resources into files the browser can load. JavaScript modules declare dependencies, so developers do not have to arrange downloads for every source file individually. section 4.5
An Angular development build follows a practical sequence:
- `ng serve` starts a build. The TypeScript compiler turns TypeScript into JavaScript, and the Angular compiler transforms templates into JavaScript statements. section 9.3.2
- Webpack starts at `main.ts`, follows imports to discover dependencies, and consolidates the compiled output into bundles. section 9.3.2
- The build summary names the generated files and reports their sizes; bundling produces multiple files rather than necessarily one file for the whole application. section 9.3.2
Table 9.7. The bundles produced by the Angular build process
|
Name
|
Description
|
|
main.js
|
This file contains the compiled output produced from the
src/app folder.
|
|
polyfills.js
|
This file contains JavaScript polyfills required for features used by the application not supported by the target browsers.
|
|
runtime.js
|
This file contains the code that loads the other modules.
|
|
styles.js
|
This file contains JavaScript code that adds the application’s global CSS stylesheets.
|
|
vendor.js
|
This file contains the third-party packages the application depends on, including the Angular packages.
|
Use the bundle map to identify what the browser receives: application code in `main.js`, third-party packages in `vendor.js`, polyfills, runtime loading code, and global styles. section 9.3.2
Add a global stylesheet
Install Bootstrap with `npm install bootstrap@5.2.3`, then add `node_modules/bootstrap/dist/css/bootstrap.min.css` to the configured `styles` array while retaining any stylesheets still needed. A template can then use classes such as `bg-primary` and `text-white`. The build report shows a larger styles bundle after the stylesheet is added. section 9.3.2
Development builds favor quick iteration over small files. For deployment, `ng build` uses an optimizing production build: it omits development features such as hot reloading, includes only required third-party code in `main.js`, and produces smaller bundles. Production also uses ahead-of-time compilation to transform Angular decorators before the application runs; development leaves that work to the browser runtime. section 9.5
...
Initial Chunk Files | Names | Raw Size | Transfer Size
styles.900b5704e247.css | styles | 292.08 kB | 28.54 kB
main.5661883fdab4.js | main | 155.62 kB | 43.44 kB
polyfills.ac3a5a892ea.js | polyfills | 32.98 kB | 10.64 kB
runtime.92c8b83a3d99.js | runtime | 892 bytes | 506 bytes
| Initial Total | 481.55 kB | 83.12 kB
...
Compare the production report’s raw and transfer sizes with the development chunk report. The production example has no separate `vendor.js` bundle. section 9.5 section 9.3.2
