Importing dependencies directly in Angular - Performance & Optimization

Performance: Importing dependencies directly

MEDIUM IMPACT

This affects the bundle size and initial load time by controlling how much code is included and when it is loaded.

Including Angular Material components in a module

Angular

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  imports: [MatButtonModule, MatIconModule, MatCardModule, MatInputModule, MatToolbarModule],
})
export class AppModule {}

Importing each component directly includes only needed code, reducing bundle size.

📈 Performance GainSaves 150kb+ in bundle size, improving LCP by 200ms

Including Angular Material components in a module

Angular

import { MatButtonModule, MatIconModule, MatCardModule, MatInputModule, MatToolbarModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatIconModule, MatCardModule, MatInputModule, MatToolbarModule],
})
export class AppModule {}

Importing from the root '@angular/material' imports the entire library, increasing bundle size unnecessarily.

📉 Performance CostAdds 200kb+ to bundle, increasing LCP by 300ms on average

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Import from root package	N/A	N/A	High due to large JS bundle	[X] Bad
Import dependencies directly	N/A	N/A	Lower due to smaller JS bundle	[OK] Good

Rendering Pipeline

Direct imports reduce the JavaScript bundle size, which speeds up parsing and execution during the loading phase, leading to faster style calculation and layout.

→Parsing & Compilation

→Style Calculation

→Layout

⚠️ BottleneckParsing & Compilation of large bundles

Core Web Vital Affected

LCP

This affects the bundle size and initial load time by controlling how much code is included and when it is loaded.

Optimization Tips

1Always import Angular dependencies from their specific entry points, not the root package.

2Smaller bundles lead to faster parsing and quicker page load times.

3Reducing bundle size improves Largest Contentful Paint (LCP) and user experience.

Performance Quiz - 3 Questions

What is the main performance benefit of importing Angular dependencies directly?

A Easier to write code

B More features available automatically

C Smaller bundle size and faster page load

D Improves CSS rendering speed

DevTools: Network

How to check: Open DevTools > Network tab > Reload page > Filter by JS files > Check size of Angular Material related files

What to look for: Look for large bundle sizes indicating root imports; smaller, modular files indicate direct imports