What is tree shaking in JavaScript?

What is Tree Shaking?

If you are an experienced JavaScript developer, you may have heard of Tree Shaking. Removing unused code from an application is a common technique, and it also removes unused imports from the application. Here, the term "tree shaking" was introduced by shaking the tree, removing unnecessary branches of code and keeping the required code in the final package.

Basically, tree dithering is used to eliminate invalid or unused code.

Why do we need Tree Shaking?

As we saw in the above part of the tutorial, tree shaking is used to remove unused code from the application package. The main reason for using Tree Shaking is to reduce the size of the JavaScript bundle we deliver to the user's browser. If the package size is smaller, it will load faster on the browser. Additionally, less data is required to download the bundle in a web browser, improving the performance of the application.

Especially, tree-shaking technology is very important in web development when developing websites that rely on large dynamic data. If your web application is very large but contains static web pages, you don't need tree-shaking, but even if your application is small and loads a lot of dynamic data, you will need tree-shaking to remove the extra code.

How does Tree Shaking work?

In this section, we will learn how Tree Shaking works in real-time development.

Let’s understand tree-shaking with a basic example.

Here we created three different files and added different JavaScript functions to the files according to the file names.

File name – sum.js

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

File name – Factorial.js

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

File name-multiply.js

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

File name – 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 exported the sum, factorial and multiplication functions from different files. After that, we imported all three functions in the index.js file. Here, we have only used the sum() function but not the Factorial() or multiply() functions. Therefore, we have an unused import in the index.js file and we need to remove it.

In ES5, we use "require()" to import functions or modules from any other JavaScript file. Therefore, we can conditionally import modules 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 module so that it is loaded as per the requirement.

But in ES6, we cannot conditionally import modules as shown below.

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

The conditional import code above does not work. Therefore, we need to use a JavaScript bundler.

How to use Bundlers for Tree Shaking?

As we saw in the above section, in ES6 we cannot use conditional imports. Therefore, we need to use packagers such as webpack, Rollup, parcel, etc.

First, we need to configure the bundler for tree shaking. It involves setting the mode to "Production" and adding optimization settings to enable tree shaking.

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

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

After that, users need to import the module according to ES6 format, and need to ensure that the ‘require()’ method is not used to import.

In this way, developers can use bundlers to enable tree shaking in JavaScript, which helps improve the performance of applications by reducing load times on web browsers.

The above is the detailed content of What is tree shaking in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!