Dynamic component loading in Angular - Performance & Optimization

Performance: Dynamic component loading

MEDIUM IMPACT

This affects the initial page load speed and interaction responsiveness by controlling when and how components are loaded and rendered.

Loading components that are not immediately visible on the page

Angular

import { ViewContainerRef, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<ng-template #container></ng-template>`
})
export class AppComponent {
  constructor(private vcr: ViewContainerRef) {}

  async loadComponent() {
    const { ComponentA } = await import('./component-a');
    this.vcr.clear();
    this.vcr.createComponent(ComponentA);
  }
}

ComponentA is loaded only when loadComponent() is called, reducing initial bundle size and speeding up first paint.

📈 Performance GainSaves tens of KBs on initial load, reduces blocking time, improves LCP

Loading components that are not immediately visible on the page

Angular

import { ComponentA } from './component-a';

@Component({
  selector: 'app-root',
  template: `<component-a></component-a>`
})
export class AppComponent {}

ComponentA is loaded and rendered immediately, increasing initial bundle size and delaying page load.

📉 Performance CostIncreases bundle size by tens of KBs, blocks rendering until component loads

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Static import and render	High (all components created at start)	Multiple (due to many components)	High (all painted immediately)	[X] Bad
Dynamic import with lazy loading	Low (only loaded components created)	Single or few (on-demand)	Low (only painted when needed)	[OK] Good

Rendering Pipeline

Dynamic component loading delays the creation and rendering of components until explicitly requested, reducing initial style calculation and layout work.

→Script Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckScript Parsing and Layout during initial load

Core Web Vital Affected

LCP, INP

This affects the initial page load speed and interaction responsiveness by controlling when and how components are loaded and rendered.

Optimization Tips

1Use dynamic imports to load components only when needed.

2Avoid loading all components upfront to reduce initial bundle size.

3Balance lazy loading to prevent interaction delays.

Performance Quiz - 3 Questions

What is the main performance benefit of dynamic component loading in Angular?

A Blocks rendering until all components are loaded

B Increases the number of DOM nodes on page load

C Reduces initial bundle size and speeds up first paint

D Automatically caches all components in memory

DevTools: Performance

How to check: Record a performance profile during page load and interaction. Look for script parsing and layout times related to component creation.

What to look for: Long scripting and layout blocks during initial load indicate static loading; shorter initial blocks with deferred component creation indicate good dynamic loading.