Differential loading in Angular is a performance optimization technique where the Angular CLI generates two sets of JavaScript bundles during the build process:
-
Modern bundle – Uses ES2015+ syntax for modern browsers.
-
Legacy bundle – Uses ES5 syntax for older browsers (like IE11).
These bundles are automatically served based on the capabilities of the browser, allowing modern browsers to load smaller, faster code while still supporting older ones.
🔍 How It Works
When you run:
Angular produces:
-
ES2015+ bundles (e.g.,
main-es2015.js) -
ES5 bundles (e.g.,
main-es5.js)
The index.html will include <script> tags like:
-
type="module"is recognized by modern browsers → they load the ES2015+ bundle. -
nomoduleis ignored by modern browsers → used by older browsers to load ES5.
✅ Benefits of Differential Loading
| Feature | Benefit |
|---|---|
| 🏎 Faster loads | Smaller ES2015+ bundles = better performance on modern browsers |
| 🌐 Broader support | ES5 fallback ensures older browsers (e.g., IE11) still work |
| 📦 Reduced bloat | Modern browsers skip the heavy ES5 bundles |
⚙️ Enabling Differential Loading
-
Angular 8+ introduced it.
-
Angular 12+ enabled it by default for production builds.
-
No manual configuration needed—just run
ng build --prod.
🚫 Angular 13+ Update
As of Angular 13:
-
Angular dropped support for IE11, so differential loading is disabled by default.
-
Only modern JavaScript (ES2015+) is emitted unless you specifically opt in via custom configurations.
Summary
Differential Loading = Angular’s way of optimizing performance by serving modern JavaScript to capable browsers and a backward-compatible version to older ones.