What is Tree Shaking?
A build optimization that eliminates unused code (dead code) from your JavaScript bundle by analyzing import/export statements and removing anything that isn't actually used.
In plain English
Tree shaking is like shaking an apple tree to harvest fruit. The ripe apples (used code) fall into the basket, while the dead leaves and branches (unused code) are left behind. Your final bundle only contains the code that's actually needed.
How it works
Modern bundlers (webpack, Rollup, esbuild) analyze the import/export graph of your code. Starting from entry points, they trace which exports are actually used and eliminate everything else. For tree shaking to work, code must use ES module syntax (import/export), not CommonJS (require). Libraries must be properly structured to be tree-shakable.
Why it matters for AI-built apps
AI tools often import entire libraries when only one function is needed — 'import _ from lodash' pulls in 70KB when you only need 'debounce.' Tree shaking should eliminate unused code, but it only works with properly structured ES modules. Understanding tree shaking helps you write imports that result in smaller, faster bundles.
Common issues
Using require() instead of import (CommonJS can't be tree-shaken), barrel exports that defeat tree shaking (importing from index.ts pulls everything), side-effect-full modules that can't be safely eliminated, libraries not marked as side-effect-free in package.json, and dynamic imports that bundlers can't analyze statically.
Best practices
Use named imports instead of default imports where possible (import { debounce } from 'lodash-es'). Prefer libraries with ES module support (-es suffix variants). Avoid barrel files (index.ts that re-exports everything) for large modules. Mark your own packages as sideEffects: false in package.json. Use bundle analysis tools to verify tree shaking is working.
Frequently asked questions
Why is my bundle still large even with tree shaking enabled?
Common reasons: using CommonJS libraries that can't be tree-shaken, barrel files (index.ts re-exports) that pull in entire modules, libraries with side effects that can't be safely eliminated, and dynamic imports/requires that bundlers can't analyze. Use bundle analyzer to identify the largest modules and look for tree-shakable alternatives.
Does tree shaking work with all npm packages?
No. It only works with packages that use ES module syntax (import/export). Older packages using CommonJS (require/module.exports) can't be tree-shaken. Look for packages with 'module' or 'exports' fields in their package.json, or use ES module variants (lodash-es instead of lodash).
Check your app
Get a professional review of your app at a fixed price.
Security Scan
Black-box review of your public-facing app. No code access needed.
- OWASP Top 10 checks
- SSL/TLS analysis
- Security headers
- Expert review within 24h
Code Audit
In-depth review of your source code for security, quality, and best practices.
- Security vulnerabilities
- Code quality review
- Dependency audit
- AI pattern analysis
Complete Bundle
Both scans in one package with cross-referenced findings.
- Everything in both products
- Cross-referenced findings
- Unified action plan
100% credited toward any paid service. Start with an audit, then let us fix what we find.
Worried about tree shaking in your app?
Get a professional code audit ($19) or book a free call to discuss your concerns.