Tree Shaking: Removing Dead Code from Your Bundle

Summary: Tree Shaking Checklist

Now I can summarize.

For tree shaking to work:

1. Use ES Modules: import/export, not CommonJS
2. Prefer named imports: import { fn } > import lib
3. Declare sideEffects: Specify in package.json
4. Watch barrel files: Only when needed, only lightweight
5. Static imports: Minimize dynamic imports
6. Production build: Dev mode doesn't tree shake
7. Verify: Check with bundle analyzer

When building libraries:

1. Provide ES Modules version (module field)
2. Design around named exports
3. Declare sideEffects: false
4. Specify entry points with exports field

Common mistakes:

• Using lodash instead of lodash-es
• Bringing everything with default import
• Re-exporting heavy modules in barrel files
• Not specifying sideEffects in package.json
• Wondering "why doesn't it work?" in development mode

Tree shaking isn't magic. Write code that build tools can statically analyze, and they'll automatically drop dead code. To properly shake a tree, you need to plant it in a way that allows shaking. That was the key insight.