Back to Hooks

Bundle Size Monitor

PostToolUse

Monitors JavaScript bundle size after builds and warns when the bundle exceeds size thresholds

performancebundle-sizeoptimizationbuild

Hook Script

#!/bin/bash
# Bundle Size Monitor Hook
# Warns when build output exceeds size thresholds

COMMAND="$1"

# Only check after build commands
if ! echo "$COMMAND" | grep -qE "(npm run build|yarn build|pnpm build|next build|vite build)"; then
  exit 0
fi

# Configurable threshold in KB (default 500KB)
MAX_SIZE_KB=${BUNDLE_SIZE_LIMIT:-500}

# Check common build output directories
for DIR in ".next" "dist" "build" "out"; do
  if [ -d "$DIR" ]; then
    # Find JS files and check total size
    TOTAL_KB=$(find "$DIR" -name "*.js" -exec du -k {} + 2>/dev/null | awk '{sum+=$1} END {print sum}')

    if [ -n "$TOTAL_KB" ] && [ "$TOTAL_KB" -gt "$MAX_SIZE_KB" ]; then
      echo "BUNDLE SIZE WARNING"
      echo ""
      echo "Total JS bundle size: ${TOTAL_KB}KB (threshold: ${MAX_SIZE_KB}KB)"
      echo ""
      echo "Largest files:"
      find "$DIR" -name "*.js" -exec du -k {} + 2>/dev/null | sort -rn | head -5
      echo ""
      echo "Consider: code splitting, tree shaking, dynamic imports, or removing unused dependencies."
      # Warning only — don't block the build
      exit 0
    fi
  fi
done

exit 0

Settings Configuration

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Bash",
        "command": "./hooks/bundle-size-check.sh"
      }
    ]
  }
}

How to use

  1. Create a hooks directory in your project: mkdir hooks
  2. Save the hook script as hooks/bundle-size-check.sh
  3. Make it executable: chmod +x hooks/bundle-size-check.sh
  4. Add the configuration to your Claude Code settings
  5. Restart Claude Code to apply changes