Optimizing Web Performance: Tree Shaking Explained

TREE SHAKING

📝 In this blog, we’ll delve into the concept of Tree Shaking — a crucial process in web development. Understanding tree shaking is essential for optimizing the performance of our code and ensuring that only necessary parts are included in our final product. 🕵️‍♀️ Let’s explore What is this technique and Why it is vital for creating efficient and streamlined applications.

🤔 First Let’s define what is Tree Shaking.

💡 TREE SHAKING is a technique used in JavaScript to eliminate dead code or unused modules from a bundle during the build process. Tree shaking is typically a part of the bundling process in JavaScript-based development. When you bundle your JavaScript code, you are essentially combining multiple files into a single file for optimized delivery to the browser.

📚 Read here: Bundling: Optimizing Web Performance

🤯 Let’s try to understand it with this example

😀 Imagine you have a big tree of code, and some branches (unused code) are just weighing it down( i.e. reducing your web app performance). Tree shaking is like shaking that tree to let go of those unnecessary branches, making our code lighter and faster. 🫡

Let’s try to understand better with the code now 🤩

Operators.js

export function add ( num1 , num2 ){
 return num1 + num2 ;
}

export function sub ( num1 , num2 ){
 return num1 - num2 ;
}

export function mul ( num1 , num2 ){
 return num1 * num2 ;
}

export function div ( num1 , num2 ){
 return num1 / num2 ;
}

Main.js

import { mul , add } from './Operators';

console.log( mul ( 3 , 8 ) );

console.log( add ( 55 , 23 ) );

🔥 When all these files are bundled together, Here is the final bundled code

// Bundled Operator

export function add ( num1 , num2 ){
  return num1 + num2 ;
}

export function mul ( num1 , num2 ){
  return num1 * num2 ;
}

console.log( mul ( 3 , 8 ) );
console.log( add ( 55 , 23 ) );

Here sub, div function is excluded from the final bundle because they are not used in our application & this is done by the treeshaking technique which is done during the bundling process.

🤨 Ok! But what if functions are dependent on user input [ i.e. dynamic user input ]? Will the Tree Shaking technique still eliminate the use of unused functions?

👉 In a scenario where multiple functions depend on user input, tree shaking faces a challenge and can be less effective. Since the user’s input is not known until runtime, the build tool may include all potentially relevant functions in the bundle, even if not all are eventually used. This dynamic nature of user-dependent input makes it harder for tree shaking to optimize effectively, and developers may need to consider alternative strategies for code splitting or lazy loading in such cases.

// Module A
export function add(num1, num2) {
  return num1 + num2;
}

// Module B
export function multiply(num1, num2) {
  return num1 * num2;
}

// Main application file
import { add, multiply } from './modules';

// User input
const userInput = prompt('Enter 1 to add or 2 to multiply:');

let result;

if (userInput === '1') {
  result = add(3, 4);
} else if (userInput === '2') {
  result = multiply(3, 4);
}

console.log(result);

In this scenario, the user’s input dynamically determines whether the ‘add’ or ‘multiply’ function is called, posing a challenge for tree shaking during the build process. Despite applying tree shaking, both functions may end up in the final bundle due to the dynamic nature of user input, making it necessary for developers to consider alternatives like code splitting or lazy loading for optimal performance.

😀 Advantages
1. Reduced Bundle Size: Smaller bundles lead to quicker downloads for users, enhancing page load times.
2. Bandwidth Savings: Smaller bundles require less bandwidth to transfer over the network, reducing hosting costs and improving the overall efficiency of web applications.

🫣 Disadvantage
1. Less Effective during Dynamic user input, Conditional loading etc.
2. Unexpected behaviour might arise mostly when the application involves Dynamic imports and libraries or Frameworks are not fully compatible.

💡 Conclusion: Tree Shaking is a valuable technique in JavaScript for eliminating unused code during the bundling process, resulting in smaller bundles and improved application performance. However, its effectiveness can be compromised in scenarios involving dynamic user input, conditional loading, and potential compatibility issues with certain libraries or frameworks, requiring developers to carefully consider alternative optimization strategies.

📚 Earlier Post:

👉 What is NPM ?
👉 Demystifying Semantic Versioning
👉 Dependencies , DevDependencies & PeerDependencies
👉 Local Vs Global Packaging
👉 Bundling: Optimizing Web Performance

🔍 Coming up next:

👉 Minification , Sanitisation
👉 Code Splitting , Lazy Loading

Stay tuned for more insights into the world of ReactJs development! 🚀📦