Shared modules for reusable components in Angular - Performance & Optimization

Performance: Shared modules for reusable components

MEDIUM IMPACT

This affects initial page load speed and bundle size by controlling how reusable components are loaded and shared across the app.

Reusing components across multiple feature modules

Angular

import { CommonModule } from '@angular/common';
import { ComponentA } from './component-a.component';

@NgModule({
  declarations: [ComponentA],
  imports: [CommonModule],
  exports: [ComponentA]
})
export class SharedModule {}

@NgModule({
  imports: [CommonModule, SharedModule]
})
export class FeatureModule1 {}

@NgModule({
  imports: [CommonModule, SharedModule]
})
export class FeatureModule2 {}

ComponentA is declared once in SharedModule and imported where needed, avoiding duplication and reducing bundle size.

📈 Performance GainSaves bundle size by sharing code, reducing initial load time and improving LCP.

Reusing components across multiple feature modules

Angular

import { CommonModule } from '@angular/common';
import { ComponentA } from './component-a.component';

@NgModule({
  declarations: [ComponentA],
  imports: [CommonModule],
  exports: [ComponentA]
})
export class FeatureModule1 {}

@NgModule({
  declarations: [ComponentA],
  imports: [CommonModule],
  exports: [ComponentA]
})
export class FeatureModule2 {}

ComponentA is declared and bundled separately in multiple feature modules, causing code duplication and larger bundles.

📉 Performance CostAdds duplicate component code to bundles, increasing bundle size and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicate component declarations in multiple modules	No extra DOM nodes but duplicated JS code	No direct reflows caused	Increased paint cost due to slower JS execution	[X] Bad
Single shared module for reusable components	No extra DOM nodes, shared JS code	No direct reflows caused	Lower paint cost due to smaller JS bundle	[OK] Good

Rendering Pipeline

Shared modules reduce duplicated component code in bundles, which decreases JavaScript parsing and execution time during the loading phase.

→Parsing & Compilation

→Script Evaluation

→Rendering

⚠️ BottleneckParsing & Compilation of duplicated code increases load time.

Core Web Vital Affected

LCP

This affects initial page load speed and bundle size by controlling how reusable components are loaded and shared across the app.

Optimization Tips

1Declare reusable components once in a shared module to avoid duplication.

2Import shared modules in feature modules instead of redeclaring components.

3Smaller bundles from shared modules improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

What is the main performance benefit of using a shared module for reusable components in Angular?

A Automatically lazy loads components on demand

B Reduces duplicate code in bundles, improving load speed

C Increases DOM nodes for better rendering

D Removes the need for imports in feature modules

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, filter by JS files, and compare bundle sizes. Use Performance tab to record page load and check scripting time.

What to look for: Look for smaller JS bundle sizes and reduced scripting time indicating shared modules reduce load cost.