What is tree shaking in JavaScript?

What is Tree Shaking?

If you are an experienced JavaScript developer, you may hear about tree shaking. It is a common technique to remove unused codes from the application and also, and it removes unused imports from the application. Here, the ‘Tree shaking’ term is introduced by shaking a tree, removing unnecessary branches of the code, and keeping the required code in the final bundle.

Basically, tree shaking is used to eliminate the dead or unused code.

Why do we Require Tree Shaking?

As we have seen in the above part of the tutorial, tree shaking is used to remove the unused code from the application bundle. The main reason to use tree shaking is to reduce the size of the JavaScript bundle we deliver to the user’s browser. If the bundle size is smaller, it loads faster on the browser. Also, it requires fewer data to download the bundle in the web browser, which improves the performance of the application.

Particularly, the tree-shaking technique is important in web development while developing websites that depend on large dynamic data. If your web application is very large but contains static web pages, you don’t require tree-shaking, but even if your application is small and loads lots of dynamic data, you require tree-shaking to remove extra codes.

How Does Tree Shaking Work?

In this section, we will understand how tree shaking works in real-time development.

Let’s understand tree-shaking by basic example.

Here, we have created three different files and added different JavaScript functions to the files according to the file name.

Filename – sum.js

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

Filename – factorial.js

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

Filename – multiply.js

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

Filename – index.js

import { sum } from './sum.js';
import { factorial } from './factorial.js';
import { multiply } from './multiply.js';
console.log(sum(2, 3));

In the above example, we have exported the sum, factorial, and multiply functions from the different files. After that, we imported all three functions in the index.js file. Here, we have used only the sum() function, but we haven’t used the factorial() or multiply() function. So, we have an unused import in the index.js file, which we require to remove.

In ES5, we were using the ‘require()’ to import the function or module from any other JavaScript file. So, we can import the modules conditionally as shown below.

let isSumRequire = true;
var sum;
var multiply;
if (isSumRequire) {
   sum = require('./sum');
} else {
   multiply = require('./multiply');
}

Here, based on the condition, we import the modules so it gets loaded based on the requirements.

But in ES6, we can’t import modules conditionally like as shown below.

let isSumRequire = true;
if (isSumRequire) {
   import sum from './sum';
} else {
   import multiply from './multiply';
}

The above code of conditional import won’t work. So, we require to use JavaScript bundlers.

How to use Bundlers for Tree Shaking?

As we have seen in the above part, in ES6, we can’t use conditional import. So, we require to use the bundlers like webpack, Rollup, parcel, etc.

First, we require to configure the bundler for the tree shaking. It involves setting the mode to 'production' and adding an optimization setting to enable tree shaking.

For example, in webpack, you can use the below code.

module.exports = {
   mode: 'production',
   optimization: {
      usedExports: true,
   },
   // other configuration settings...
};

After that, users need to import modules according to ES6 format and need to make sure doesn’t use the ‘require()’ method to import.

In this way, developers can enable the tree shaking in the JavaScript using the bundlers, which helps improve the application's performance by reducing the loading time on the web browser.