Declarations, imports, and exports in Angular - Performance & Optimization

Performance: Declarations, imports, and exports

MEDIUM IMPACT

This concept affects the initial bundle size and module loading time, impacting how fast the Angular app starts and renders.

Organizing Angular modules to optimize app startup

Angular

import { CommonModule } from '@angular/common';

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

Only imports and declares what is needed for a specific feature, enabling lazy loading and smaller bundles.

📈 Performance GainSaves 100kb+ in bundle size, reduces blocking time by 50-100ms

Organizing Angular modules to optimize app startup

Angular

import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [ComponentA, ComponentB, ComponentC],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, HttpClientModule, RouterModule],
  exports: [ComponentA, ComponentB, ComponentC]
})
export class SharedModule {}

Importing and declaring many modules and components in one module causes a large bundle and slower initial load.

📉 Performance CostAdds 150kb+ to initial bundle, blocks rendering for 100-200ms on slow devices

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large shared module with many imports/exports	N/A	N/A	High due to delayed script execution	[X] Bad
Small focused module with minimal imports/exports	N/A	N/A	Low, scripts load and execute faster	[OK] Good

Rendering Pipeline

Angular processes declarations, imports, and exports during compilation and bundling. Large imports increase bundle size, delaying script parsing and execution, which delays rendering.

→Bundle Parsing

→Script Execution

→Initial Render

⚠️ BottleneckBundle Parsing and Script Execution

Core Web Vital Affected

LCP

This concept affects the initial bundle size and module loading time, impacting how fast the Angular app starts and renders.

Optimization Tips

1Only declare components, directives, and pipes you use in a module.

2Import Angular modules selectively to avoid bloated bundles.

3Use lazy loading to split code and improve initial load speed.

Performance Quiz - 3 Questions

How does importing many modules in a single Angular module affect page load?

A It increases bundle size and delays initial rendering

B It decreases bundle size and speeds up rendering

C It has no effect on performance

D It only affects server-side rendering

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by JS files, check bundle sizes and load times.

What to look for: Look for large initial bundles and long download or parse times indicating heavy imports.