79. Building for Production: AOT Compilation and Bundling
When deploying an Angular application, you must optimize it for speed and size. The ng build --configuration=production command handles this using key techniques.
1. Ahead-of-Time (AOT) Compilation
By default, ng build --prod enables AOT.
- JIT (Just-in-Time, Development): Compiles the application in the browser at runtime. This is fast for development rebuilds but slow for users.
- AOT (Ahead-of-Time, Production): The Angular compiler runs during the build process on the server (or build machine), transforming Angular templates and code into highly efficient JavaScript before deployment.
Benefits of AOT:
- Faster Rendering: The browser downloads executable JavaScript, not templates and Angular's compiler.
- Smaller Size: Eliminates the need to ship the Angular compiler (which is large).
- Early Error Detection: Template binding errors are caught at build time, not runtime.
2. Bundling and Tree-Shaking
- Bundling: Combining many application files into a few large files (bundles or chunks) to reduce HTTP requests.
- Tree-Shaking: Removing unused code (dead code elimination). If you import a library but only use 1% of its functions, tree-shaking discards the other 99% during the production build.
3. Configuration in angular.json
The --configuration=production flag applies optimization settings defined in angular.json:
"production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "buildOptimizer": true }
These optimizations result in a smaller, faster application package ready for deployment.