Bundle Optimization

Tree Shaking

Remove unused exports from modules.

How Tree Shaking Works

1. Analyzes import/export statements
2. Tracks which exports are actually used
3. Removes unused code from final bundle

Webpack Configuration

// webpack.config.js
module.exports = {
  mode: 'production', // Enables tree shaking
  optimization: {
    usedExports: true, // Mark unused exports
    minimize: true, // Remove dead code
    sideEffects: true, // Check package.json sideEffects
  },
};

Package.json Side Effects

{
  "name": "my-library",
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
}

ES Modules vs CommonJS

// ✅ Good: ES Modules (tree-shakeable)
import {Button} from './components';
import {formatDate} from './utils';

// ❌ Bad: CommonJS (not tree-shakeable)
const components = require('./components');
const utils = require('./utils');

// ❌ Bad: Importing entire library
import _ from 'lodash';
import {map, filter} from 'lodash';

// ✅ Good: Import specific functions
import map from 'lodash/map';
import filter from 'lodash/filter';

Tree Shaking Example

// utils.js
export const used = () => 'used';
export const unused = () => 'unused';

// app.js
import { used } from './utils';
console.log(used());

// Result: only used() is bundled, unused() is removed

Dead Code Elimination

Remove code that will never execute.

Dead Code Patterns

// 1. Unreachable code
function example() {
  return;
  console.log('This never runs'); // Dead code
}

// 2. Unused variables
const unused = 'This is never used'; // Dead code

// 3. Unused functions
function unusedFunction() { // Dead code
  return 'never called';
}

// 4. False conditions
if (false) {
  console.log('Never executes'); // Dead code
}

// 5. Console.log in production
console.log('Debug info'); // Should be removed

Terser Configuration

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // Remove console.log
            drop_debugger: true,
            pure_funcs: ['console.log', 'console.info'], // Remove specific functions
          },
          mangle: true,
          output: {
            comments: false, // Remove comments
          },
        },
        extractComments: false,
      }),
    ],
  },
};

Babel Plugin

// babel.config.json
{
  "plugins": [
    ["transform-remove-console", { "exclude": ["error", "warn"] }]
  ]
}

ESLint Rule

// .eslintrc.json
{
  "rules": {
    "no-unused-vars": "error",
    "no-unreachable": "error",
    "no-console": ["warn", { "allow": ["warn", "error"] }]
  }
}

Bundle Analysis

Visualize and optimize bundle contents.

Webpack Bundle Analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false,
    }),
  ],
};

// Run analysis
npm run build -- --analyze

Source Map Explorer

// package.json
{
  "scripts": {
    "analyze": "source-map-explorer 'dist/*.js'"
  }
}

// Build with source maps
GENERATE_SOURCEMAP=true npm run build

Bundlephobia

# Check package sizes
npx bundlephobia lodash
npx bundlephobia moment

Size Budgets

// package.json
{
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "250kb",
      "maximumError": "350kb"
    },
    {
      "type": "lazy",
      "maximumWarning": "50kb",
      "maximumError": "100kb"
    }
  ]
}

Analysis Checklist

• Check for large dependencies
• Identify duplicate packages
• Find unused imports
• Look for large individual modules
• Check chunk sizes
• Verify tree shaking is working

Optimization Strategies

1. Replace large libraries with smaller alternatives
2. Import only needed functions from large libraries
3. Use dynamic imports for code splitting
4. Remove unused dependencies
5. Upgrade dependencies for smaller bundles