Tree shaking and dead code removal in Angular - Performance & Optimization

Performance: Tree shaking and dead code removal

HIGH IMPACT

This affects the bundle size and initial load speed by removing unused code from the final app package.

Including only necessary code in the Angular app bundle

Angular

import { ComponentA } from 'library';
@Component({ ... })
export class MyComponent { ... }

Imports only the used component, enabling tree shaking to remove unused code.

📈 Performance Gainreduces bundle size by 80%+, speeds up initial load and LCP

Including only necessary code in the Angular app bundle

Angular

import { ComponentA, ComponentB, ComponentC } from 'library';
// Using only ComponentA in the app
@Component({ ... })
export class MyComponent { ... }

Imports all components even if only one is used, increasing bundle size unnecessarily.

📉 Performance Costadds 100kb+ to bundle, blocks rendering longer on initial load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Import entire library	No direct impact	No direct impact	Larger JS bundle delays paint	[X] Bad
Import only used modules	No direct impact	No direct impact	Smaller JS bundle speeds paint	[OK] Good

Rendering Pipeline

Tree shaking happens during build time, reducing the JavaScript bundle size. Smaller bundles download and parse faster, improving the critical rendering path.

→Network

→JavaScript Parsing

→JavaScript Execution

⚠️ BottleneckNetwork and JavaScript Parsing stages due to large bundle size

Core Web Vital Affected

LCP

This affects the bundle size and initial load speed by removing unused code from the final app package.

Optimization Tips

1Always import only what you use to enable tree shaking.

2Use ES module syntax for static imports to help dead code removal.

3Check bundle size regularly to catch unused code increasing load time.

Performance Quiz - 3 Questions

What is the main benefit of tree shaking in Angular apps?

A Faster database queries

B Improved CSS styling performance

C Smaller JavaScript bundles leading to faster page loads

D Better image compression

DevTools: Network

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

What to look for: Look for large JavaScript files that could be reduced by tree shaking; smaller bundles indicate better dead code removal.