Tree Shaking

// utils.js - Library with multiple functions
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;
}

// main.js - Only imports what it needs
import { add, multiply } from './utils.js';

console.log(add(5, 3));      // 8
console.log(multiply(4, 2)); // 8

// ✅ RESULT: Tree shaking removes subtract() and divide()
// Final bundle contains ONLY add() and multiply()
// subtract() and divide() are never imported = dead code eliminated!

// Before tree shaking: ~200 bytes
// After tree shaking: ~100 bytes (50% reduction)

// ❌ BAD: Default export with all functions
// utils.js
const utils = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b
};

export default utils;

// Usage - imports EVERYTHING even if you only need one
import utils from './utils';
utils.add(2, 3); // All other functions also bundled!


// ✅ GOOD: Named exports
// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

// Usage - imports ONLY what you use
import { add } from './utils';
add(2, 3); // Only add() is bundled!


// ❌ BAD: Side effects prevent tree shaking
// module.js
console.log('Module loaded!'); // Side effect
export function myFunction() { ... }

// ✅ GOOD: Pure modules without side effects
// module.js
export function myFunction() { ... }
// No side effects = better tree shaking


// ❌ BAD: Using wildcard imports
import * as utils from './utils';
utils.add(2, 3); // Imports everything

// ✅ GOOD: Import only what you need
import { add } from './utils';
add(2, 3); // Imports only add

// package.json - Tell bundler your code is pure
{
  "name": "my-library",
  "version": "1.0.0",
  "sideEffects": false  // ✅ No side effects = aggressive tree shaking
}

// If you have some files with side effects (like CSS)
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
}

// Webpack configuration
module.exports = {
  mode: 'production', // Tree shaking in production mode
  optimization: {
    usedExports: true,  // Mark unused exports
    minimize: true,     // Remove them during minification
    sideEffects: true   // Respect sideEffects field
  }
};

// Rollup configuration
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'  // ES modules for tree shaking
  },
  treeshake: {
    moduleSideEffects: false,  // Assume no side effects
    propertyReadSideEffects: false,
    unknownGlobalSideEffects: false
  }
};

// Vite (automatic tree shaking)
// Works out of the box, just use ES modules!

// Lodash - Tree-shakeable version
// ❌ BAD: Imports entire lodash (70KB+)
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ GOOD: Use lodash-es (ES module version)
import { debounce } from 'lodash-es';
debounce(fn, 300); // Only debounce included (~2KB)

// Or import specific functions
import debounce from 'lodash-es/debounce';


// Material-UI / MUI
// ❌ BAD: Imports entire library
import { Button, TextField } from '@mui/material';

// ✅ BETTER: Direct imports (if not using babel plugin)
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';


// React Icons
// ❌ BAD: Imports all icons
import * as Icons from 'react-icons/fa';

// ✅ GOOD: Import specific icons
import { FaUser, FaHome } from 'react-icons/fa';


// Date-fns (tree-shakeable by default)
// ✅ GOOD: Named imports work perfectly
import { format, addDays, isAfter } from 'date-fns';


// Moment.js vs Day.js
// ❌ BAD: Moment.js is NOT tree-shakeable (entire library bundled)
import moment from 'moment';

// ✅ GOOD: Day.js is tree-shakeable
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';