Build & Optimization

`ng build` produces an optimized bundle using esbuild by default — tree-shaken, minified, and content-hashed for cache-busting.

4 min read Level 2/5 #angular#build#esbuild

What you'll learn

Run ng build and understand the dist output
Tune budgets in angular.json
Read the bundle breakdown to find regressions

ng build is your production build. Modern Angular uses @angular/build with esbuild under the hood — much faster than the legacy webpack-based builder.

Run a Production Build

ng build

Output lands in dist/my-app/:

dist/my-app/browser/
  index.html
  main-AB12CD34.js
  polyfills-EF56GH78.js
  styles-IJ90KL12.css
  assets/

Each filename includes a content hash — change a byte, the hash changes, and the user’s browser fetches fresh. Files that didn’t change keep their old hash and stay cached forever.

Budgets

angular.json lets you fail the build (or just warn) when bundles get too big.

{
  "budgets": [
    { "type": "initial",       "maximumWarning": "500kb", "maximumError": "1mb" },
    { "type": "anyComponentStyle", "maximumWarning": "4kb", "maximumError": "8kb" }
  ]
}

A warning is just yellow text; an error fails CI. Set them low enough that regressions get caught, high enough that you don’t have to bump them weekly.

Production Flags

ng build --configuration production   # default for ng build now
ng build --source-map                  # include .map files (omit in prod)
ng build --aot=false                   # JIT for debugging (rarely needed)

Production mode enables AOT compilation, dead-code elimination, minification, and removes Angular’s development-only assertions. The result is typically 60-70% smaller than dev mode.

CI Tips

Cache node_modules and .angular/cache between runs — the latter is Angular’s incremental build cache and skips work on unchanged files.

Deployment & Going Further →