Tree shaking and dead code removal in Angular - Deep Dive

Overview - Tree shaking and dead code removal

What is it?

Tree shaking and dead code removal are techniques used to make Angular applications smaller and faster by removing code that is never used. Tree shaking analyzes the code to find parts that are not needed and excludes them from the final bundle. Dead code removal cleans up leftover unused code after tree shaking to keep the app lean.

Why it matters

Without tree shaking and dead code removal, Angular apps would include all the code written, even parts never used. This makes apps bigger, slower to load, and wastes users' data and device resources. These techniques help deliver faster, more efficient apps that feel smooth and save bandwidth.

Where it fits

Before learning tree shaking, you should understand Angular modules, components, and how bundling works. After mastering it, you can explore advanced optimization like lazy loading and differential loading to further improve app performance.

Mental Model

Core Idea

Tree shaking and dead code removal work together to cut away unused parts of your Angular app so only what’s needed is sent to users.

Think of it like...

Imagine packing for a trip: tree shaking is like checking your suitcase and removing clothes you won’t wear, while dead code removal is tidying up any forgotten items left behind to make your bag lighter.

┌─────────────────────────────┐
│  Your Angular Application    │
├──────────────┬──────────────┤
│ Used Code    │ Unused Code  │
│ (Needed)    │ (Not Needed) │
├──────────────┴──────────────┤
│       Tree Shaking Removes   │
│       Unused Code            │
├─────────────────────────────┤
│   Dead Code Removal Cleans   │
│   Leftover Unused Fragments  │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is Tree Shaking in Angular

Concept: Tree shaking is a process that removes unused code from your Angular app during build time.

When you build an Angular app, the build tools analyze your code to find which parts are actually used. Any code that is never called or referenced is considered 'dead' and removed. This reduces the size of the final JavaScript bundle sent to the browser.

Result

The app bundle becomes smaller, so it loads faster and uses less data.

Understanding that not all code you write ends up in the final app helps you appreciate how Angular optimizes performance automatically.

2

Foundation

Dead Code Removal Explained

Concept: Dead code removal cleans up leftover unused code fragments after tree shaking to ensure no unnecessary code remains.

Even after tree shaking, some unused code may remain due to complex dependencies or build tool limitations. Dead code removal is a further step that scans the code to remove these leftovers, making the app even leaner.

Result

The final app bundle is as small as possible, improving load times and responsiveness.

Knowing that multiple steps work together to remove unused code shows how Angular builds are carefully optimized.

3

Intermediate

How Angular Uses ES Modules for Tree Shaking

🤔Before reading on: do you think Angular can tree shake code written with CommonJS modules as well as ES modules? Commit to your answer.

Concept: Angular relies on ES modules syntax to identify and remove unused code during tree shaking.

ES modules use static import and export statements, which allow build tools to analyze dependencies without running the code. Angular’s build system uses this to detect unused exports and exclude them. CommonJS modules, which use dynamic require calls, are harder to analyze and less tree-shakeable.

Result

Angular apps using ES modules get better tree shaking and smaller bundles.

Understanding the importance of ES modules explains why Angular encourages modern JavaScript syntax for optimal performance.

4

Intermediate

Role of Angular CLI and Webpack in Tree Shaking

🤔Before reading on: do you think Angular CLI automatically performs tree shaking, or do you need to configure it manually? Commit to your answer.

Concept: Angular CLI uses Webpack and build optimizers to perform tree shaking and dead code removal automatically during production builds.

When you run 'ng build --prod', Angular CLI triggers Webpack to analyze your code and remove unused parts. It also applies build optimizer tools that further clean the code. This process requires no manual setup, making it easy to get optimized bundles.

Result

Production builds are smaller and faster without extra developer effort.

Knowing that Angular CLI automates these optimizations helps you focus on writing code without worrying about manual bundle tuning.

5

Intermediate

How Side Effects Affect Tree Shaking

🤔Before reading on: do you think code with side effects can be safely removed by tree shaking? Commit to your answer.

Concept: Code that causes side effects (like modifying global variables) may not be removed by tree shaking to avoid breaking the app.

Build tools mark some modules or files as having side effects. These are kept even if their exports are unused because removing them might change app behavior. Developers can mark files as side-effect-free to help tree shaking be more aggressive.

Result

Tree shaking is safe but sometimes conservative to prevent bugs.

Understanding side effects clarifies why some unused code remains and how to help the build tools remove more.

6

Advanced

Optimizing Angular Code for Better Tree Shaking

🤔Before reading on: do you think using barrel files (index.ts) helps or hurts tree shaking? Commit to your answer.

Concept: Writing Angular code with clear, direct imports and avoiding certain patterns improves tree shaking effectiveness.

Avoid importing entire modules when only parts are needed. Use direct imports instead of barrel files that re-export many things, as barrels can prevent tree shaking from removing unused exports. Also, avoid dynamic imports or require calls that confuse static analysis.

Result

Better tree shaking leads to smaller bundles and faster apps.

Knowing how code structure affects tree shaking empowers you to write more efficient Angular apps.

7

Expert

How Angular Ivy Enhances Tree Shaking

🤔Before reading on: do you think Angular Ivy makes tree shaking easier or harder? Commit to your answer.

Concept: Angular Ivy, the modern Angular rendering engine, improves tree shaking by generating more fine-grained code and removing unused Angular features.

Ivy compiles Angular components into smaller, more isolated pieces. This allows build tools to remove unused components, directives, and pipes more effectively. Ivy also reduces runtime code size by eliminating legacy Angular code paths.

Result

Angular apps built with Ivy have smaller bundles and better performance.

Understanding Ivy’s role reveals how Angular’s internal improvements directly benefit tree shaking and app speed.

Under the Hood

Tree shaking works by static analysis of ES module import/export statements to build a dependency graph. The build tool marks code that is never referenced as removable. Dead code removal then scans the intermediate code to eliminate unreachable instructions. Angular CLI uses Webpack and build optimizer plugins to automate this process during production builds, leveraging Angular Ivy’s fine-grained code generation to maximize removals.

Why designed this way?

Tree shaking was designed to solve the problem of large JavaScript bundles slowing down web apps. ES modules provide static structure needed for reliable analysis. Angular’s build system integrates tree shaking to automate optimization without developer effort. Ivy was introduced to generate code that is easier to analyze and remove unused parts, improving performance and developer experience.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ Source Code   │─────▶│ Static Module │─────▶│ Dependency    │
│ (ES Modules)  │      │ Analysis      │      │ Graph         │
└───────────────┘      └───────────────┘      └───────────────┘
                                │                      │
                                ▼                      ▼
                      ┌─────────────────┐    ┌─────────────────┐
                      │ Mark Unused     │    │ Mark Used       │
                      │ Code for Removal│    │ Code to Keep    │
                      └─────────────────┘    └─────────────────┘
                                │                      │
                                └─────────┬────────────┘
                                          ▼
                              ┌─────────────────────┐
                              │ Dead Code Removal    │
                              │ (Clean Unreachable) │
                              └─────────────────────┘
                                          │
                                          ▼
                              ┌─────────────────────┐
                              │ Final Optimized      │
                              │ Bundle for Browser   │
                              └─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does tree shaking remove all unused code regardless of how it is written? Commit to yes or no.

Common Belief: Tree shaking removes every bit of unused code automatically.

Reality: Tree shaking only removes unused code that can be statically analyzed, mainly ES modules without side effects. Dynamic code or code with side effects may remain.

Why it matters: Assuming all unused code is removed can lead to unexpectedly large bundles and slower apps.

Quick: Can using barrel files improve tree shaking? Commit to yes or no.

Common Belief: Using barrel files (index.ts) always helps tree shaking by organizing exports.

Reality: Barrel files can hurt tree shaking because they re-export many modules, making it harder for tools to remove unused parts.

Why it matters: Misusing barrels can cause bigger bundles and degrade app performance.

Quick: Does Angular Ivy make tree shaking obsolete? Commit to yes or no.

Common Belief: With Angular Ivy, tree shaking is no longer needed because Ivy handles all optimizations.

Reality: Ivy improves tree shaking but does not replace it; both work together to optimize the app.

Why it matters: Ignoring tree shaking because of Ivy can miss further bundle size reductions.

Quick: Is dead code removal the same as tree shaking? Commit to yes or no.

Common Belief: Dead code removal and tree shaking are the same process.

Reality: They are related but distinct; tree shaking identifies unused code, dead code removal cleans leftover unreachable code after tree shaking.

Why it matters: Confusing the two can lead to misunderstanding build optimizations and troubleshooting.

Expert Zone

1

Angular Ivy’s generated code uses static fields and functions that enable more precise tree shaking than previous Angular versions.

2

Marking 'sideEffects' as false in package.json helps build tools aggressively remove unused code but requires careful testing to avoid breaking side-effectful modules.

3

Dynamic imports and lazy loading can complement tree shaking by loading code only when needed, further reducing initial bundle size.

When NOT to use

Tree shaking is less effective or not applicable when using CommonJS modules, dynamic code loading without static imports, or code with unavoidable side effects. In such cases, manual code splitting or lazy loading should be used instead.

Production Patterns

In production, Angular apps use 'ng build --prod' to enable tree shaking and dead code removal automatically. Developers optimize imports by avoiding barrels and marking sideEffects in package.json. Ivy is enabled by default to maximize code elimination. Lazy loading modules complements tree shaking for large apps.

Connections

Modular Programming

Tree shaking builds on modular programming principles by analyzing module dependencies to remove unused parts.

Understanding modular programming helps grasp how static imports enable tree shaking to work effectively.

Garbage Collection in Memory Management

Both tree shaking and garbage collection remove unused resources, but tree shaking does it before runtime while garbage collection happens during runtime.

Knowing this distinction clarifies how build-time optimizations differ from runtime memory cleanup.

Minimalism in Design

Tree shaking reflects minimalism by removing unnecessary elements to improve efficiency and clarity.

Appreciating minimalism in art or design can deepen understanding of why removing unused code improves user experience.

Common Pitfalls

#1 Assuming all unused code is removed regardless of module format.

Wrong approach:

import * as utils from 'commonjs-utils'; // expecting tree shaking to remove unused utils

Correct approach:

import { neededFunction } from 'es-utils'; // ES module import enables tree shaking

Root cause:

Misunderstanding that tree shaking requires static ES module syntax and does not work well with CommonJS.

#2 Using barrel files that re-export many modules without care.

Wrong approach:

export * from './component-a';
export * from './component-b'; // barrel file re-exporting everything

Correct approach:

export { ComponentA } from './component-a';
export { ComponentB } from './component-b'; // selective exports

Root cause:

Not realizing that barrels can prevent tree shaking by bundling unused exports together.

#3 Marking modules with side effects incorrectly as side-effect-free.

Wrong approach:

"sideEffects": false in package.json for modules that modify globals

Correct approach:

"sideEffects": true for modules with side effects to prevent removal

Root cause:

Mislabeling side effects causes build tools to remove necessary code, breaking the app.

Key Takeaways

Tree shaking and dead code removal are essential Angular build optimizations that remove unused code to make apps smaller and faster.

They rely on static analysis of ES modules and careful marking of side effects to safely eliminate code.

Angular CLI automates these optimizations during production builds, leveraging Angular Ivy’s fine-grained code generation.

Writing code with direct imports and avoiding barrels improves tree shaking effectiveness.

Understanding these concepts helps developers build efficient, high-performance Angular applications.