Angular › Standalone Components

Why does the standalone components approach generally result in smaller final bundle sizes?

Beginner

Answer

Because each standalone component explicitly lists exactly what it depends on, Angular's build tools can more easily determine which code is actually used and safely remove anything that is not, a process called tree shaking, resulting in a final bundle that more closely reflects only what the app genuinely needs.

// Only the specific pieces this component actually needs are imported and bundled
@Component({
  standalone: true,
  imports: [NgIf, RouterLink] // explicit, precise dependencies
})
export class HeaderComponent {}

Real-world example A team notices a measurable reduction in their app's final bundle size after fully migrating to standalone components, since Angular's build tools could now more precisely determine and remove genuinely unused code.

Common follow-ups: How significant is this bundle size reduction typically in practice for a real project?;Does this same tree shaking benefit apply equally to third party libraries used in the app?

Performance & Lazy Loading;Build Environments & Deployment