What is tree shaking in JavaScript?

What is Tree Shaking?

Tree shaking is a technique used in modern JavaScript development to eliminate unused or "dead" code from your application bundle. The term comes from the metaphor of shaking a tree to remove dead leaves and branches, keeping only what's alive and necessary.

This process analyzes your code during the build process and removes any imported functions, variables, or modules that are never actually used in your application, resulting in a smaller, more efficient bundle.

Why Do We Need Tree Shaking?

Tree shaking provides several key benefits for web applications:

• Reduced Bundle Size: Smaller bundles mean faster downloads and less bandwidth usage
• Improved Performance: Less code to parse and execute means faster application startup
• Better User Experience: Faster loading times, especially important on mobile devices and slow networks

Tree shaking is particularly valuable when using large libraries where you only need specific functions, or when working with modular codebases where not all modules are used in every build.

How Tree Shaking Works

Tree shaking relies on ES6 module syntax (import/export) because these statements are static and can be analyzed at build time. Let's see how it works with a practical example:

Creating Modular Functions

sum.js

export function sum() {
   let array = [1, 2, 3, 4, 5];
   return array.reduce((a, b) => a + b, 0);
}

factorial.js

export function factorial(n) {
   if (n === 0) {
      return 1;
   }
   return n * factorial(n - 1);
}

multiply.js

export function multiply(a, b) {
   return a * b;
}

Main Application File

index.js

import { sum } from './sum.js';
import { factorial } from './factorial.js';
import { multiply } from './multiply.js';

console.log(sum()); // Only sum() is actually used

In this example, we import three functions but only use sum(). Tree shaking will detect that factorial and multiply are never called and remove them from the final bundle.

ES5 vs ES6 Module Loading

Tree shaking works because ES6 imports are static, unlike ES5's dynamic require() statements:

ES5 (Dynamic Loading - Can't be tree-shaken):

let isSumRequired = true;
if (isSumRequired) {
   const sum = require('./sum'); // Dynamic import
} else {
   const multiply = require('./multiply');
}

ES6 (Static Imports - Can be tree-shaken):

// This won't work - ES6 imports must be at top level
if (condition) {
   import { sum } from './sum'; // SyntaxError!
}

// Correct way - static imports
import { sum } from './sum';
import { multiply } from './multiply';

Configuring Tree Shaking with Webpack

Modern bundlers like Webpack, Rollup, and Parcel support tree shaking. Here's a basic Webpack configuration:

module.exports = {
   mode: 'production', // Enables tree shaking automatically
   optimization: {
      usedExports: true,
      sideEffects: false, // Mark your code as side-effect free
   },
   // other configuration settings...
};

Key Requirements for Tree Shaking

• Use ES6 import/export syntax instead of require()
• Configure your bundler for production mode
• Ensure your code has no side effects (or mark side effects appropriately)
• Use named exports rather than default exports when possible

Conclusion

Tree shaking is an essential optimization technique that automatically removes unused code from your JavaScript bundles. By using ES6 modules and proper bundler configuration, you can significantly reduce your application's bundle size and improve performance for end users.