The Diet Your App Deserves: Tree Shaking vs Dead Code Elimination

js   if (false) {   console.log("This will never run");   }   

js   function unuse

dFunction() { return 42; }

_If never called → removed_

DCE targets unreachable code, unused variables, and dead branches. It requires a production build configuration (e.g., `mode: 'production'` in Webpack) to activate advanced minification passes like Terser or SWC.

### Tree Shaking: The Gardener
Tree Shaking operates at the **module/import level**. It relies on static ES6 `import/export` syntax to build a dependency graph and prune unused exports.

js import { debounce, throttle } from "lodash-es";

If you only use:

js debounce()

_`throttle` gets removed_

Tree Shaking only includes what is explicitly consumed. It cannot function with dynamic module systems.

### Why ES Modules Matter
Tree Shaking depends on:

**ES6 modules (import/export)**

Because they are:

_Static (analyzable at build time)_

js const lib = require("lodash");

_Dynamic → bundler can’t analyze usage_

js import { debounce } from "lodash-es";

_Bundler knows exactly what’s used_

### How to Make Your Code Shakeable
Using a bundler isn’t enough. You need to write **shake-friendly code**.

#### 1. Avoid Side Effects

js import "./init"; // modifies global state

_Bundler won’t remove it_

Mark in `package.json`:

json { "sideEffects": false }

#### 2. Use Named Exports

js export default { a, b, c };

js export const a = ... export const b = ...

_Bundler can pick only what’s needed_

#### 3. Import Only What You Need

js import _ from "lodash";

js import { debounce } from "lodash-es";

_Smaller bundle instantly_

## Pitfall Guide
1. **Relying on Default Exports**: Default exports bundle all module members into a single object, preventing static analysis from isolating unused exports. Always prefer named exports for library code.
2. **Ignoring Side Effects**: Unmarked side effects (global mutations, polyfills, CSS imports) force bundlers to conservatively retain entire modules. Explicitly declare `sideEffects` in `package.json` to enable safe pruning.
3. **Using CommonJS in Modern Bundlers**: `require()` resolves at runtime, making dependency graphs unpredictable. Tree shaking requires static `import/export` syntax to function.
4. **Assuming All Libraries Are Tree-Shakeable**: Many npm packages still ship CJS builds or pre-bundled UMD files. Always verify if a package provides an ESM entry point (e.g., `lodash-es`, `date-fns`).
5. **Over-Importing from Utility Libraries**: Importing the entire namespace (`import _ from "lodash"`) defeats static analysis. Use deep imports or ESM-compatible variants to isolate specific functions.
6. **Skipping Production Mode Configuration**: Tree shaking and DCE are often disabled in development builds. Ensure your bundler is configured for production (`mode: 'production'`, `optimization.usedExports: true`) to activate these optimizations.

## Deliverables
**📘 Shake-Ready Architecture Blueprint**
A step-by-step guide to auditing your dependency graph, configuring bundlers for static analysis, and validating unused code elimination. Includes module resolution strategies, ESM migration patterns, and production build optimization workflows.

**✅ Pre-Deployment Bundle Optimization Checklist**
- [ ] Verify all third-party dependencies use ESM entry points
- [ ] Replace default exports with named exports in internal modules
- [ ] Configure `sideEffects: false` or array-based exclusions in `package.json`
- [ ] Enable `usedExports` and `minimize` in bundler production config
- [ ] Run bundle analyzer to validate unused code removal
- [ ] Test runtime behavior to ensure no side-effect regressions

**⚙️ Configuration Templates**
- `package.json` sideEffects declaration template
- Webpack 5 production config (`optimization.sideEffects`, `module.rules` for ESM)
- Rollup `treeshake` configuration with `moduleSideEffects` and `pureExternalModules` settings
- Vite/Rollup tree-shaking validation script for CI/CD pipelines