What is Tree-Shaking? 🌳 🐘

As our applications grow, managing and maintaining their performance sustainably can become more challenging. In particular, if we don’t build our front-end applications in a healthy and manageable way, unused code in our projects can cause our application bundle to grow, and our applications can start to slow down and lose usability over time. We can easily overcome such situations in our front-end applications by using modern techniques. In this article, we will focus on one of these structures: tree-shaking.

What is Tree-Shaking?

We can say that Tree-Shaking is a technique that analyzes your JavaScript project and optimizes dead code by eliminating it.

Dead code: Code snippets in our source files that are not used but exist in our codebase.

How does Tree-Shaking work?

Tree-Shaking creates a tree-like structure for the dependencies in your application. Each node in the tree represents the dependencies that provide different functions for your application. And by passing unused dependencies through tree-shaking (shaking the tree), optimization is provided, and a build is created with only the code snippets used in the application after optimization.

To use Tree-Shaking in our applications, it is generally sufficient to choose modern bundlers, which have built-in tree-shaking support. The tools that have built-in support are Webpack, Rollup, and Parcel, for example.

You may be wondering if using these tools is enough to apply this terminology. To clarify this issue, just using these tools does not help us solve our problems. Along with these, you need to apply modern JavaScript terms in your project as well. Especially for tree-shaking, you need to be proficient in ES2015 module syntax and be more careful when importing unused code snippets into your components, classes, and modules. Additionally, we should not forget that code that causes side effects cannot be optimized by tree-shaking.

So, how can we write code suitable for Tree-Shaking?

For example, we can export our utils functions with a js module so that we can use them in other modules, but as seen below, if some of these utils functions are not used, they will still be imported. Importing only what we need is essential for both readability and the efficiency of the project.

generateRandomFloatInRange, generateRandomIntInRange
// we can delete these functions since we don't need them

In another example, when we use large packages such as lodash or moment, we can get rid of unnecessary bundle load by importing only the relevant method. If we cannot import, we can transfer this package to our project in a straightforward way.

There are many optimization tools available in Webpack, which allow for optimizations without requiring major changes to the project.

For example, the following Webpack feature only defines the exports that you use within the bundle, thus avoiding unnecessary file size:

optimization: {
  usedExports: true,
},

With the following Webpack plugin, you can easily analyze your application’s bundle to identify which dependencies require optimization:

npm i webpack-bundle-analyzer

After downloading the plugin, it is enough to add the following code to our webpack config file:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

After that, by running your application, you can see all your dependencies in a UI form.

You can find these and more optimizations in the Webpack Optimization documentation.

Resources:

Webpack Docs

MDN Web Docs

Wikipedia

Web.dev