Root module (AppModule) structure in Angular - Performance & Optimization

Performance: Root module (AppModule) structure

MEDIUM IMPACT

This affects the initial page load speed and rendering performance by controlling how much code and how many components load at startup.

Setting up the root Angular module for an app

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot([
    { path: 'heavy', loadChildren: () => import('./heavy-feature/heavy-feature.module').then(m => m.HeavyFeatureModule) }
  ])],
  bootstrap: [AppComponent]
})
export class AppModule {}

Uses lazy loading for heavy feature modules, so their code loads only when needed, reducing initial bundle size and speeding up first paint.

📈 Performance GainReduces initial bundle by 100+ KB, improves LCP by 300-500ms, non-blocking initial render

Setting up the root Angular module for an app

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeavyFeatureModule } from './heavy-feature/heavy-feature.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HeavyFeatureModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Importing large feature modules directly in the root module causes all their code to load immediately, increasing bundle size and delaying initial render.

📉 Performance CostIncreases bundle size by 100+ KB, blocks rendering until all modules load, delays LCP by 300-500ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Import all feature modules in AppModule	Low (few nodes initially)	Low (initial load only)	High (delayed paint due to JS parsing)	[X] Bad
Lazy load feature modules via Router	Low (few nodes initially)	Low (initial load only)	Low (faster paint)	[OK] Good

Rendering Pipeline

The root module loads first and sets up the app structure. Large imports here increase JavaScript parsing and execution time, delaying style calculation and layout.

→JavaScript Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Parsing and Execution due to large initial bundle

Core Web Vital Affected

LCP

This affects the initial page load speed and rendering performance by controlling how much code and how many components load at startup.

Optimization Tips

1Keep the root module imports minimal to reduce initial bundle size.

2Use lazy loading for large feature modules to speed up first paint.

3Avoid importing heavy libraries or modules directly in AppModule.

Performance Quiz - 3 Questions

What is the main performance drawback of importing all feature modules directly in the root AppModule?

A It triggers many layout reflows during user interaction.

B It increases the initial bundle size and delays the first contentful paint.

C It causes excessive DOM nodes to be created immediately.

D It reduces the app's accessibility features.

DevTools: Performance

How to check: Record a page load and look at the Main thread activity. Check the time spent in scripting and when the first contentful paint occurs.

What to look for: Long scripting tasks and delayed first contentful paint indicate large initial bundles slowing down the root module load.