Tree shaking and dead code removal in Angular - Step-by-Step Execution

Concept Flow - Tree shaking and dead code removal

Start: Angular build

↓

Analyze imports and exports

↓

Mark used code

↓

Identify unused code

↓

Remove unused code (dead code)

↓

Generate optimized bundle

↓

Output smaller, efficient app

Angular build analyzes code usage, marks used parts, removes unused code, and outputs a smaller app bundle.

Execution Sample

Angular

import { Component } from '@angular/core';
import { unusedFunction } from './utils';

@Component({ selector: 'app-root', template: '<h1>Hello</h1>' })
export class AppComponent {
  title = 'My App';
}

This Angular component imports a function that is never used, which tree shaking will remove.

Execution Table

Step	Action	Code Analyzed	Used Code Marked	Dead Code Removed	Bundle Size Impact
1	Start build	All project files	None yet	None yet	Full size
2	Analyze imports	AppComponent, utils	AppComponent class	unusedFunction identified unused	No change yet
3	Mark used code	AppComponent class and dependencies	AppComponent class marked used	unusedFunction marked unused	No change yet
4	Remove dead code	unusedFunction	N/A	unusedFunction removed	Bundle smaller
5	Generate bundle	Used code only	AppComponent class	unusedFunction gone	Optimized smaller bundle
6	Output	Final app bundle	Only used code included	Dead code removed	Smaller, faster app

💡 Build completes with unused code removed, resulting in smaller bundle size.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
usedCode	[]	[AppComponent]	[AppComponent]	[AppComponent]	[AppComponent]
deadCode	[]	[unusedFunction]	[unusedFunction]	[]	[]
bundleSize	Full	Full	Full	Smaller	Smaller

Key Moments - 2 Insights

Why is the unusedFunction removed even though it is imported?

Because the build process marks it as unused (see execution_table step 3) and removes it to reduce bundle size (step 4).

Does tree shaking remove code that is dynamically used?

No, only code that static analysis shows as unused is removed. Dynamic usage may prevent removal.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, which code is marked as used?

A AppComponent class

B unusedFunction

C Both AppComponent and unusedFunction

D None

💡 Hint

Check the 'Used Code Marked' column at step 3 in execution_table.

At which step is the dead code actually removed?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Dead Code Removed' column in execution_table.

If the unusedFunction was used dynamically, how would the bundleSize change after step 4?

A It would become smaller

B It would stay full size

C It would be empty

D It would be larger

💡 Hint

Refer to variable_tracker 'bundleSize' and the explanation in key_moments about dynamic usage.

Concept Snapshot

Tree shaking in Angular removes unused code during build.
It analyzes imports and usage to mark code as used or unused.
Unused code is removed to reduce bundle size.
This makes the app faster and smaller.
Dynamic code usage may prevent removal.

Full Transcript

Tree shaking and dead code removal in Angular happen during the build process. The build starts by analyzing all project files and imports. It marks which code is actually used, like the AppComponent class, and identifies unused code, such as an imported but unused function. Then, it removes this dead code to make the final app bundle smaller and more efficient. This process helps the app load faster and use less memory. However, code used dynamically might not be removed because the build cannot detect its usage statically.