What tree shaking is
Tree shaking is a step in the build process that removes code an application never actually uses, so it is left out of the final file sent to users. The name is a vivid metaphor: imagine the code as a tree, and shaking it so the dead leaves, the unused parts, fall away. The term became popular through the JavaScript bundler Rollup and is now a standard feature of modern web build tools.
Why unused code matters
Developers rely on libraries that contain many functions, but a typical app uses only a few of them. Without tree shaking, the whole library, including every function the app never calls, gets bundled and shipped to the browser. That makes downloads larger and pages slower, especially on mobile connections. Removing the unused parts, often called dead code elimination, keeps the file small and the site quick to load.
How it works
Tree shaking depends on being able to see exactly which pieces of code are connected. The build tool starts from the app's entry point and follows every import to work out what is really used, then discards the rest. This analysis works best with ECMAScript modules, the modern import and export system, because their structure is fixed and can be read without running the code, unlike older module formats that are harder to analyze.
What can block it
Tree shaking is not always able to remove everything. If code has side effects, meaning it does something just by being loaded, such as changing a global setting, the tool must keep it to avoid breaking the app. Libraries can mark themselves as free of side effects to help, and developers can import only the specific functions they need rather than a whole library, which gives the tool the best chance to trim aggressively.
In practice
Modern bundlers such as Webpack, Rollup, esbuild, and Vite perform tree shaking automatically when building for production. Developers rarely configure it directly, but they help it along by choosing libraries that support it and by importing precisely. The payoff is a smaller bundle, which means faster page loads, less data used, and a better experience for visitors, particularly on slower devices and networks.
The bottom line
Tree shaking trims the dead branches from your code, leaving out functions and modules the app never uses so the final download stays small. It relies on the clear structure of modern modules and can be blocked by code with side effects. For anyone building web apps, it is one of the simplest ways to ship less code and load pages faster without changing what the app does.
Related on Skillo
See also: What is a polyfill? Explained, What is caching? Explained.
Sources
Published date reflects the original event date (2026-10-23). This article is original Skillo editorial written from the sources above; facts were verified in September 2026.
Leave a Reply