What Is Tree Shaking? A Detailed Explanation

Author: @Tranloi2k
Created: 2025-09-24
Description: An explanation of the tree shaking technique, how it works, its benefits, and things to watch out for when using it with Webpack and other modern bundlers.

1. What Is Tree Shaking?

Definition:
Tree shaking is a technique that removes ("shakes out") unused code from the final bundle when building a web application. This reduces the JS file size and improves page-load performance.

The name "tree shaking" comes from the idea of "shaking a tree" - keeping only the branches (code) that are needed and dropping the rest.

2. How Does Tree Shaking Work?

• It relies on the ES Module (import/export) mechanism to analyze which parts of the code are actually used.
• During the build, bundlers such as Webpack, Rollup, and Vite will:
  • Scan the project's entire dependency graph.
  • Find any functions, variables, or modules that are never imported or used anywhere.
  • Remove all of that code from the final bundle.

Important:
Tree shaking only works well with ES Modules (import/export).
With CommonJS (require, module.exports), tree shaking has significant limitations.

3. Benefits of Tree Shaking

• Smaller bundle size: removes unused modules, functions, and variables.
• Faster page loads: a smaller JS file downloads and parses faster in the browser.
• Optimized performance: reduces the memory and resources needed to run the app.

4. Tree Shaking Example

Module utils.js:

// utils.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

Used in app.js:

import { add } from './utils';
// Only the add function is used
console.log(add(2, 3));

=> When built with Webpack/Rollup/Vite, the subtract function will be dropped from the bundle, and only add is kept.

5. Things to Watch Out for When Using Tree Shaking

• Only works with ES Modules (import/export).
• Doesn't work well with side-effect imports or CommonJS.
• Make sure the libraries you use support ES Modules for tree shaking to be effective.
• Avoid writing code with side effects outside module scope, since it won't be removed.
• You can verify tree-shaking effectiveness through a bundle report (Webpack Bundle Analyzer).

Example of a side effect (not tree-shaken):

// module.js
export function foo() {}
console.log('Side effect outside of scope'); // Even if not imported, this line still ends up in the bundle

6. Configuring Tree Shaking in Webpack

Webpack enables tree shaking by default in production mode when the code uses ES Modules.

webpack.config.js:

module.exports = {
  mode: 'production', // automatically enables tree shaking
  // You can configure additional optimization options
  optimization: {
    usedExports: true
  }
};

7. Summary

Tree shaking is an extremely important optimization technique that removes dead code when building modern web applications. Write your code using ES Modules and avoid unnecessary side effects to get the most out of tree shaking!