Tree Shaking

Tree shaking is dead-code elimination for JavaScript modules. A bundler analyzes static import and export statements and drops functions and values that nothing uses from the final bundle.

Why it matters

Libraries often contain far more than a page needs. Tree shaking can reduce bundle size noticeably, improving download and parse time. It depends on ES module syntax; older CommonJS require calls are hard to analyze, and code with side effects can prevent removal. Check the bundle analyzer output after a build to confirm that large unused libraries really disappeared.

Example

// utils.js exports add, subtract, multiply
import { add } from './utils.js';
console.log(add(1, 2));

Only add is included in the production bundle. subtract and multiply are discarded.

Common mistakes

• Importing from a package's default export object, which pulls in everything.
• Assuming it works in development mode. It usually applies to production builds.
• Using libraries that are not marked side-effect free.

Related

• Bundler
• Minification
• Lazy Loading
• npm
• Tool: Page weight analyzer

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.