What is tree shaking?

Tree shaking is a term commonly used in the JavaScript context to describe dead code elimination. It refers to the optimization process of removing unused code from your final bundle, resulting in smaller file sizes and improved application performance.

What is Tree Shaking?

Tree shaking, also known as 'dead code elimination,' is an optimization technique used by JavaScript bundlers (like Webpack, Rollup, Parcel) to analyze your code and identify parts that are not actually being used or referenced. Once identified, these unused parts are 'shaken off' and not included in the final production bundle. This process is highly effective for modern JavaScript applications that often use modular architectures, importing functionalities from various libraries and custom modules.

The primary goal of tree shaking is to reduce the overall size of the JavaScript bundle shipped to the client's browser. Smaller bundles lead to faster download times, quicker parsing, and execution, ultimately improving the user experience and application load performance. It's particularly beneficial when using large libraries where you might only need a small fraction of their exposed functionalities.

How it Works (Concepts)

• ES Modules (ESM): Tree shaking relies heavily on the static module structure of ES Modules (import/export). Unlike CommonJS (require/module.exports), ES Modules allow bundlers to statically analyze the dependency graph at build time without executing the code.
• Static Analysis: Bundlers perform static analysis to determine which exports from a module are actually imported and used elsewhere in the application. They build a dependency graph of the entire project.
• Dead Code Identification: Any function, variable, or class that is exported but never imported or used by any other module is identified as 'dead code.'
• Code Elimination: During the bundling process, the identified dead code is then removed from the final output, effectively 'shaking' it out of the bundle.

Example Scenario

Consider a utility file that exports several functions, but your application only uses one of them.

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

// app.js
import { add } from './utils';

console.log(add(2, 3)); // Only 'add' is used

Without tree shaking, the subtract and multiply functions would still be included in the final bundle, even though app.js doesn't use them. With tree shaking enabled, the bundler recognizes that subtract and multiply are not imported anywhere and will exclude them, resulting in a smaller bundle that only contains the add function.

Requirements and Configuration

• ES Modules: Ensure your project uses ES Modules syntax for imports and exports. CommonJS modules typically do not allow for effective tree shaking.
• Bundler Support: Use a modern JavaScript bundler like Webpack (v2+), Rollup, or Parcel, which have built-in support for tree shaking.
• Production Mode: Tree shaking is usually enabled automatically when building for production (e.g., webpack --mode=production).
• sideEffects in package.json: For libraries, you can specify "sideEffects": false in your package.json to inform bundlers that your modules are pure and can be safely tree-shaken, or specify an array of files that do have side effects (e.g., CSS imports). This helps bundlers avoid removing code that produces global side effects even if it's not explicitly imported.
• Transpilers (e.g., Babel): If using Babel, ensure it's configured not to transpile ES Modules into CommonJS modules, as this would prevent tree shaking. The @babel/preset-env with modules: false option is crucial for this.