Understanding Tree Shaking in JavaScript
Tree shaking is a JavaScript technique that removes what’s known as dead code – code that has been imported, but never actually executed. It’s called tree shaking because the idea is similar to shaking leaves dead leaves off of a tree. The “tree” is your JavaScript code, and the “leaves” are unused exports or functions.
When you build web applications, particularly with bundlers like Webpack or Rollup, your final bundle can have a large file size if you imported full libraries or modules even if you only had to use a small portion of the library/module. Tree shaking removes the chunks you don’t use and therefore overall reduces the file size of the bundle and improves performance.
It’s worth noting that tree shaking works during the build process, and not at runtime. Tools such as Webpack will analyze your code and look through the modules to interpret which modules are being called, and which modules can be stripped out without consequence. In modern front end development, performance and load time impact the user experience and therefore can impact the credibility of your site and SEO.
In order to take advantage of tree shaking, your code will need to utilize ES6 module syntax (import and export) because the CommonJS (require) module specification does not lend itself to static analysis in the same way. Essentially, if you are exporting multiple functions from a file and you only import one of them into another file, tree shaking will drop the others from your final bundle.
In a nutshell, tree shaking is a helpful optimization technique and it is very valuable for developers wanting to create fast, lean, and efficient applications. It is very useful when combined with other performance techniques like lazy loading and code splitting to make sure that your JavaScript bundles contain only the code you actually need.
How Tree Shaking Works with JavaScript Bundlers
The Role of ES Modules in Tree Shaking
For tree shaking to work effectively, it relies on ES Modules (ESM). ES Modules support static structure—meaning that the import and export statements are predictable and can be analyzed at compile time. This is what allows bundlers to identify which parts of your code are unused.
For example:
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a – b;
}
If your app only uses the add function:
import { add } from ‘./math’;
console.log(add(2, 3));
Tree shaking tools will remove subtract from the final bundle since it’s never used. That’s the core idea—removing dead weight from your application.
To enable tree shaking, ensure your project is using ES Modules. Most modern frameworks like React, Vue, and Svelte already support this. If you’re still using CommonJS, consider upgrading your imports and exports.
Bundlers like Webpack 4+ automatically support tree shaking if your project meets a few requirements:
- Using ES Modules
- mode set to production
- Side effects declared correctly in package.json
Webpack uses the sideEffects property in package.json to determine if a module can be safely pruned. Setting “sideEffects”: false tells the bundler that no module in your project has side effects—meaning it’s safe to remove unused parts.
Tools That Support Tree Shaking
Webpack and Rollup as Tree Shaking Champions
Among the most popular bundlers, Webpack and Rollup are widely recognized for their tree shaking capabilities. Both tools have matured significantly and offer robust support for this optimization feature.
Webpack performs tree shaking when the project is in production mode. The basic setup might look like this in your webpack.config.js:
module.exports = {
mode: ‘production’,
// Other configurations
};
But Webpack’s tree shaking also depends on correct usage of the sideEffects flag in your package.json. If you’re using third-party libraries, be aware that not all of them are tree-shakable unless properly structured.
Rollup, on the other hand, was designed from the ground up with ES Modules in mind, making it often more efficient at tree shaking than Webpack. Its configuration is more minimal, and it generally produces smaller bundles.
Here’s a simple Rollup setup:
import resolve from ‘@rollup/plugin-node-resolve’;
import commonjs from ‘@rollup/plugin-commonjs’;
export default {
input: ‘src/main.js’,
output: {
file: ‘bundle.js’,
format: ‘esm’
},
plugins: [resolve(), commonjs()]
};
Both bundlers work well, but choosing between them depends on your project’s complexity and whether you value plugin flexibility (Webpack) or bundle size optimization (Rollup).
For small libraries or reusable components, Rollup is usually the better choice. For complex web applications like web design projects , Webpack remains a solid, customizable option.
Best Practices to Ensure Effective Tree Shaking
Writing Tree-Shakable Code
Writing code that supports tree shaking requires a few mindful practices. First, always use ES6 import and export syntax. This helps bundlers perform static analysis and understand which functions or classes are safe to remove.
Example:
✅ Good:
export const sayHello = () => console.log(‘Hello!’);
❌ Bad:
module.exports = {
sayHello: () => console.log(‘Hello!’)
};
Second, avoid side effects. A side effect is any code that modifies something outside its own scope—like changing a global variable, writing to a file, or directly manipulating the DOM. Tree shaking can’t safely remove code with side effects because they might be important, even if not directly referenced.
You should also keep utility functions in separate modules instead of bundling everything into one file. This allows bundlers to include only what’s used:
// utils/add.js
export default function add(a, b) {
return a + b;
}
Third-party libraries should also be chosen carefully. Many older libraries don’t support ES Modules, which limits tree shaking. Prefer modern libraries that provide a modular structure.
To check if tree shaking is working, use tools like Webpack Bundle Analyzer or Rollup Visualizer. These tools give a clear visual breakdown of what’s in your bundle and what can be removed.
Benefits and Limitations of Tree Shaking
Why Tree Shaking Isn’t a Silver Bullet
Tree shaking can provide an immense amount of value, but there are some caveats. On the value side, the most apparent benefit is reduced bundle size which helps speed up loading times, improves SEO, and enhances user experiences— especially on mobile networks. This is a great asset to developers who are focused on performance-driven applications, or to those who are designing websites for small businesses, where speed and efficiency are everlasting and can help drive user retention and revenue. However, tree shaking does not catch everything. If the code that is a side effect, it cannot be safety eliminated.
Some libraries bundle their code in a way that will prevent you from tree shaking them, even if you are only using one method from them. This can cause you to end up with a bundle that is larger than it should be despite your best effort! Additionally, note that tree shaking only applies to exports you don’t use, not unused code inside of used functions.
For that, you need to optimize your code using minification tools like Terser for compressing the JavaScript where possible. It also requires your entire toolchain to be up-to-date in terms of modern standards, which means keeping dependencies current, using the correct module type, and being aware of best practices.
Still, for most projects, tree shaking is one of the easiest and most impactful ways to clean up your JavaScript and deliver better-performing web apps.
Conclusion
Tree shaking is a powerful tool that helps with the removal of dead code for modern JavaScript development, also helping to get package sizes down. Using ES Modules and a bundler like Webpack or Rollup, it is easier for developers to ensure that only the code they need is sent into production!
This means sites can load faster, run better, and have less old junk hanging around in the codebase. Regardless if you’re building a single page app or a full-scale web design platform, tree shaking can play a role in optimizing your product.