Tree shaking and dead code removal in Angular - Mini Project: Build & Apply

Tree shaking and dead code removal in Angular

📖 Scenario: You are building a simple Angular app that shows a list of fruits. Some helper functions are not used and should be removed automatically when building the app.

🎯 Goal: Learn how to set up an Angular component with data and configuration, use the data in the template, and understand how unused code can be removed by Angular's build process (tree shaking).

📋 What You'll Learn

Create an Angular standalone component with a list of fruits

Add a configuration variable to filter fruits by minimum length

Use a @for directive to display filtered fruits

Include an unused helper function to demonstrate dead code removal

💡 Why This Matters

🌍 Real World

In real Angular apps, unused code can make the app larger and slower. Tree shaking helps keep the app small and fast by removing code that is never used.

💼 Career

Understanding tree shaking is important for Angular developers to optimize app performance and reduce bundle size, which is a key skill in frontend development jobs.

1

Create the fruits list in the component

Create a standalone Angular component called FruitListComponent. Inside the component, create a fruits array with these exact string values: 'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: ``,
})
export class FruitListComponent {
  // Your code here
}

Need a hint?

Define a property called fruits inside the component class and assign the array with the exact fruit names.

2

Add a minimum length filter variable

Inside the FruitListComponent class, add a number variable called minLength and set it to 6. This will be used to filter fruits by their name length.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: ``,
})
export class FruitListComponent {
  fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  // Your code here
}

Need a hint?

Add a number property minLength and assign it the value 6.

3

Filter fruits and display in template

In the component's template, use an Angular @for control flow to loop over fruits and @if to filter by length greater than or equal to minLength. Display each fruit inside a <li> element. Update the template string inside the @Component decorator accordingly.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: `
    
  `,
})
export class FruitListComponent {
  fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  minLength = 6;
}

Need a hint?

Use @for (fruit of fruits; track fruit) to loop over fruits and @if (fruit.length >= minLength) to filter inside the template string.

4

Add an unused helper function to demonstrate dead code removal

Inside the FruitListComponent class, add a private method called unusedHelper that returns the string 'This function is not used'. This function will not be called anywhere, so Angular's build process should remove it automatically.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: `
    
      @for (fruit of fruits; track fruit) {
        @if (fruit.length >= minLength) {
          {{ fruit }}
        }
      }
    
  `,
})
export class FruitListComponent {
  fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  minLength = 6;

  // Your code here
}

Need a hint?

Add a private method unusedHelper that returns the exact string 'This function is not used'. Do not call it anywhere.