Tree Shaking

export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }
export function divide(a, b) { return a / b; }

// app.ts - Only uses add
import { add } from './math';
console.log(add(1, 2));

// After tree shaking: only add() is in bundle
// subtract, multiply, divide are removed

// ✅ Good: ES modules are tree-shakeable
import { debounce } from 'lodash-es';

// ❌ Bad: CommonJS imports entire library
const _ = require('lodash');
const { debounce } = require('lodash');

// ✅ Good: Named imports tree-shake well
import { Button, Input } from '@/components/ui';

// ⚠️ Careful: Barrel files can prevent tree shaking
// If components/ui/index.ts re-exports everything
import { Button } from '@/components/ui'; // May load all components

{
  "sideEffects": false
}

// Or specify files with side effects
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
}

export * from './Button';
export * from './Input';
export * from './Select';
export * from './Modal';
// ... 50 more components

// ❌ Problem: Importing one may bundle all
import { Button } from '@/components';

// ✅ Solution: Direct imports
import { Button } from '@/components/Button';

// ❌ Bad: Dynamic access prevents tree shaking
const icons = {
  home: HomeIcon,
  settings: SettingsIcon,
  user: UserIcon,
};

function Icon({ name }) {
  const IconComponent = icons[name]; // All icons bundled
  return <IconComponent />;
}

// ✅ Good: Static imports
import { HomeIcon } from './icons/HomeIcon';

function Icon({ name }) {
  switch (name) {
    case 'home': return <HomeIcon />;
    case 'settings': return <SettingsIcon />;
    // Only imported icons are bundled
  }
}

// ❌ Bad: Classes are harder to tree shake
import { Validator } from './validators';
const v = new Validator();

// ✅ Good: Pure functions tree shake better
import { validateEmail } from './validators';
validateEmail(email);

module.exports = {
  modularizeImports: {
    'lodash': {
      transform: 'lodash/{{member}}',
    },
    '@mui/material': {
      transform: '@mui/material/{{member}}',
    },
    '@mui/icons-material': {
      transform: '@mui/icons-material/{{member}}',
    },
  },
};

import { debounce, throttle } from 'lodash';
// Bundles entire lodash

import { debounce, throttle } from 'lodash';
// Transforms to:
// import debounce from 'lodash/debounce';
// import throttle from 'lodash/throttle';

module.exports = {
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@headlessui/react',
      'date-fns',
      'rxjs',
    ],
  },
};

// ❌ Bad: 70KB
import _ from 'lodash';

// ❌ Still bad: 70KB (CommonJS)
import { debounce } from 'lodash';

// ✅ Good: ~2KB
import debounce from 'lodash/debounce';

// ✅ Best: ~2KB (ES modules)
import { debounce } from 'lodash-es';

// ✅ Already tree-shakeable
import { format, parseISO } from 'date-fns';
// Only these functions are bundled

// ❌ Bad: Imports all of MUI
import { Button, TextField } from '@mui/material';

// ✅ Good: Direct imports
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

// ✅ With modularizeImports, named imports work
import { Button, TextField } from '@mui/material';

// ❌ Bad: All 1000+ icons
import { FaHome } from 'react-icons/fa';

// ✅ Good: Just one icon
import { FaHome } from 'react-icons/fa';
// This is actually fine - react-icons is already optimized

// For lucide-react, use optimizePackageImports
import { Home, Settings } from 'lucide-react';

npm install @next/bundle-analyzer

# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

# Run analysis
ANALYZE=true npm run build

import { debounce } from 'lodash';  // 70KB ❌
import debounce from 'lodash/debounce';  // 2KB ✅

// ✅ Tree-shakeable
export function formatDate(date) {
  return date.toISOString();
}

export function parseDate(str) {
  return new Date(str);
}

// ❌ Bad: Side effect prevents tree shaking
console.log('Module loaded');
export function helper() {}

// ✅ Good: No side effects
export function helper() {}

// ❌ Bad: Wildcard re-export
export * from './utils';

// ✅ Good: Explicit re-exports
export { formatDate, parseDate } from './utils';