How does Angular 21 optimize JavaScript bundles?

Question

Anubhav Sharma · Answer

Angular 21 optimizes JavaScript bundles through a combination of build-time, compile-time, and runtime strategies. Many of these were introduced gradually (Angular 15–20) and are now default, mature, and production-grade in Angular 21.

Below is a clear, system-level breakdown of how it works.

1. ESBuild-based Application Builder (Major Upgrade)

Angular 21 uses the new Application Builder by default, powered by esbuild instead of Webpack.

What this gives you

Much faster builds
Smaller bundles
Better tree-shaking
Smarter dependency graph analysis

Impact

Removes unused code more aggressively
Produces fewer, cleaner chunks
Optimizes both dev and prod builds

2. Advanced Tree Shaking

Angular 21 eliminates unused code at multiple levels:

a) Framework-level tree shaking

Unused Angular features (e.g., animations, forms) are removed if not imported
Standalone components help reduce NgModule overhead

b) Library-level tree shaking

Uses ES modules (import/export)
Honors sideEffects: false in package.json

c) Dead code elimination

Unreachable code paths are removed during minification

3. Standalone Components = Smaller Bundles

Standalone APIs reduce bundle size by:

Eliminating NgModule metadata
Enabling more granular dependency inclusion
Allowing per-component lazy loading

@Component({
  standalone: true,
  imports: [CommonModule],
})
export class DashboardComponent {}

Result

Less framework glue code
Better tree-shaking
Smaller initial bundles

4. Fine-Grained Lazy Loading

Angular 21 supports lazy loading at multiple levels:

a) Route-based lazy loading

loadComponent: () =>
  import('./profile.component').then(m => m.ProfileComponent)

b) Component-level lazy loading

Signals + deferrable views allow runtime loading

c) Deferred blocks (`@defer`)

@defer {
  <heavy-chart />
}

Result

Critical JS loads first
Non-essential JS loads later

5. Deferrable Views (`@defer`) – Runtime Optimization

Angular 21 can split bundles based on template usage:

@defer (on viewport) {
  <video-player />
}

This:

Creates separate JS chunks
Loads them only when needed
Reduces Time to Interactive (TTI)

6. Build Optimizer (Still Relevant)

Angular’s build optimizer:

Removes Angular decorators at runtime
Converts metadata into static fields
Enables better minification

Works together with:

esbuild
Terser-like minification

7. Smarter Code Splitting

Angular 21 automatically splits bundles into:

Bundle Type	Purpose
`main`	App bootstrap
`vendor`	Framework & libraries
`polyfills`	Browser compatibility
Lazy chunks	Routes / defer blocks

This avoids:

Monolithic JS files
Re-downloading unchanged code

8. Modern JavaScript Targeting

Angular 21 outputs modern JS by default:

ES2022+
No legacy polyfills unless required
Differential loading removed (simpler output)

Result

Smaller syntax
Faster execution
Fewer helper functions

9. Signals Reduce Runtime Overhead

Signals improve bundle efficiency indirectly:

Less RxJS boilerplate
Fewer subscriptions
Smaller change detection code paths

This leads to:

Less framework runtime code
Better tree shaking of unused reactive logic

10. Library Optimization & Partial Compilation

Angular libraries are shipped in partial compilation format:

Compiled at app build time
Not pre-expanded into runtime code
Enables better final bundle optimization

11. CSS & Asset Optimization (Indirect JS Impact)

Angular 21 also:

Removes unused CSS
Inlines critical CSS
Eliminates unused component styles

This reduces:

JS required for style management
Runtime overhead

Summary: How Angular 21 Keeps Bundles Small

Angular 21 optimizes bundles by default using:

esbuild-based Application Builder
Aggressive tree shaking
Standalone APIs
Lazy loading + @defer
Modern JS output
Signals-based reactivity
Partial compilation for libraries

Result:
Smaller initial load, faster runtime, and scalable bundle growth.

forum

How does Angular 21 optimize JavaScript bundles?

Can you answer this question?

1 Answers

1. ESBuild-based Application Builder (Major Upgrade)

What this gives you

2. Advanced Tree Shaking

a) Framework-level tree shaking

b) Library-level tree shaking

c) Dead code elimination

3. Standalone Components = Smaller Bundles

4. Fine-Grained Lazy Loading

a) Route-based lazy loading

b) Component-level lazy loading

c) Deferred blocks (@defer)

5. Deferrable Views (@defer) – Runtime Optimization

6. Build Optimizer (Still Relevant)

7. Smarter Code Splitting

8. Modern JavaScript Targeting

9. Signals Reduce Runtime Overhead

10. Library Optimization & Partial Compilation

11. CSS & Asset Optimization (Indirect JS Impact)

Summary: How Angular 21 Keeps Bundles Small

c) Deferred blocks (`@defer`)

5. Deferrable Views (`@defer`) – Runtime Optimization