Tree shaking and dead code removal in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is tree shaking in Angular?

Tree shaking is a process that removes unused code from the final bundle during build time. It helps make the app smaller and faster by only including the code that is actually used.

beginner

How does dead code removal improve Angular app performance?

Dead code removal deletes parts of the code that are never called or used. This reduces the app size, leading to faster loading and better user experience.

intermediate

Which Angular build tool feature helps with tree shaking?

Angular uses the Angular CLI with Webpack under the hood. Webpack performs tree shaking by analyzing ES modules and removing unused exports.

intermediate

Why should you use ES modules for effective tree shaking?

ES modules use static imports and exports, which lets build tools know exactly what code is used. This static structure allows tree shaking to safely remove unused code.

advanced

What is a common mistake that can prevent tree shaking in Angular?

Using dynamic imports or requiring modules in ways that are not statically analyzable can stop tree shaking. Also, side effects in code can prevent removal of unused parts.

What does tree shaking do in Angular builds?

A Increases the app size

B Adds extra debugging information

C Removes unused code from the final bundle

D Changes the app's runtime behavior

Tree shaking removes unused code to reduce bundle size and improve performance.

Which module system helps Angular perform tree shaking effectively?

A CommonJS

B UMD

C AMD

D ES modules

ES modules use static imports/exports, enabling build tools to remove unused code safely.

What tool does Angular CLI use to perform tree shaking?

A Webpack

B Grunt

C Gulp

D Rollup

Angular CLI uses Webpack, which supports tree shaking by analyzing ES modules.

Which of these can prevent tree shaking from removing unused code?

A Side effects in code

B Using Angular components

C Static imports

D Using TypeScript

Side effects in code can stop tree shaking because the build tool must keep code that might affect app behavior.

Dead code removal helps Angular apps by:

A Adding more features

B Removing unused code to reduce bundle size

C Making the app slower

D Changing the app's UI

Dead code removal deletes unused code, making the app smaller and faster.

Explain in your own words what tree shaking is and why it matters in Angular apps.

Think about how removing unused parts helps your app load faster.

Describe how Angular CLI and ES modules work together to enable dead code removal.

Focus on the build process and module system.

Practice

1. What is the main purpose of tree shaking in Angular?

easy

A. To remove unused code and imports during the build process

B. To add extra debugging information to the app

C. To increase the size of the final bundle

D. To automatically update Angular dependencies

Solution

1. Step 1: Understand tree shaking concept

   Tree shaking is a process that removes unused code and imports from the final build.

2. Step 2: Identify its effect in Angular

   In Angular, tree shaking helps reduce app size by excluding code that is never used.

3. Final Answer:

   To remove unused code and imports during the build process -> Option A

4. Quick Check:

   Tree shaking = remove unused code [OK]

Hint: Tree shaking removes unused code to shrink app size [OK]

Common Mistakes:

• Thinking tree shaking adds code instead of removing
• Confusing tree shaking with debugging tools
• Believing tree shaking updates dependencies automatically

2. Which syntax correctly imports a module that can be tree shaken in Angular?

easy

A. import * as Component from '@angular/core';

B. import Component from '@angular/core';

C. require('@angular/core').Component;

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

Solution

1. Step 1: Recognize ES module import syntax

   Angular uses ES module syntax: import { NamedExport } from 'module';

2. Step 2: Identify correct import for Component

   The correct syntax is importing Component as a named export inside curly braces.

3. Final Answer:

   import { Component } from '@angular/core'; -> Option D

4. Quick Check:

   Correct ES module import = import { Component } from '@angular/core'; [OK]

Hint: Use curly braces for named imports in Angular [OK]

Common Mistakes:

• Using default import syntax for named exports
• Using CommonJS require instead of ES import
• Importing everything as a namespace unnecessarily

3. Given this Angular service code, what will be removed by tree shaking if unusedMethod() is never called anywhere?

export class DataService {
  fetchData() { return 'data'; }
  unusedMethod() { return 'not used'; }
}

medium

A. Only fetchData will be kept; unusedMethod will be removed

B. Both fetchData and unusedMethod will be kept

C. Only unusedMethod will be kept; fetchData will be removed

D. Neither method will be removed

Solution

1. Step 1: Identify used and unused methods

   fetchData is assumed used; unusedMethod is never called anywhere.

2. Step 2: Apply tree shaking effect

   Tree shaking removes unused code like unusedMethod to reduce bundle size.

3. Final Answer:

   Only fetchData will be kept; unusedMethod will be removed -> Option A

4. Quick Check:

   Unused code removed = Only fetchData will be kept; unusedMethod will be removed [OK]

Hint: Unused methods get removed by tree shaking [OK]

Common Mistakes:

• Assuming all methods stay regardless of usage
• Confusing tree shaking with runtime errors
• Thinking tree shaking removes used code

4. You notice your Angular app bundle size is large despite removing unused components. What is a likely cause related to tree shaking?

medium

A. Your code uses only arrow functions

B. You are importing entire modules instead of specific components

C. You forgot to run the production build command

D. You are using lazy loading for modules

Solution

1. Step 1: Understand tree shaking limitations

   Tree shaking works best when importing specific parts, not whole modules.

2. Step 2: Identify import style impact

   Importing entire modules prevents tree shaking from removing unused parts, increasing bundle size.

3. Final Answer:

   You are importing entire modules instead of specific components -> Option B

4. Quick Check:

   Whole module imports block tree shaking = You are importing entire modules instead of specific components [OK]

Hint: Import specific parts, not whole modules, for tree shaking [OK]

Common Mistakes:

• Ignoring production build optimizations
• Thinking arrow functions affect tree shaking
• Believing lazy loading increases bundle size

5. How can you ensure a utility function in Angular is not removed by tree shaking even if it appears unused?

hard

A. Define it inside a component class without export

B. Mark it with a special comment like /* keep */

C. Export it and use it in a component or service

D. Use it only in test files

Solution

1. Step 1: Understand tree shaking criteria

   Tree shaking removes code not referenced anywhere in the app.

2. Step 2: Prevent removal by usage

   Exporting and using the function in components or services marks it as used, so it stays.

3. Final Answer:

   Export it and use it in a component or service -> Option C

4. Quick Check:

   Used code is kept by tree shaking = Export it and use it in a component or service [OK]

Hint: Use exported functions in app code to keep them [OK]

Common Mistakes:

• Thinking comments prevent tree shaking
• Defining functions without export to keep them
• Using functions only in tests to keep them