claude-workspace: Command for Claude Code

Performance Audit

Audit performance: $ARGUMENTS

Instructions

1. Bundle Analysis

# Build and measure output
pnpm build 2>&1 | tail -30

# Measure build output size
find dist/ .next/ build/ -name '*.js' -type f 2>/dev/null | \
  xargs du -sh 2>/dev/null | sort -rh | head -15

# Find the largest JS chunks
find dist/ .next/static/ build/static/ -name '*.js' -type f 2>/dev/null | \
  while read f; do echo "$(du -k \"$f\" | cut -f1)KB  $f"; done | \
  sort -rn | head -10

Flag any chunk > 200KB (gzipped) as a concern.

2. Dependency Weight

# Top 20 heaviest node_modules
du -sh node_modules/* 2>/dev/null | sort -rh | head -20

# Check for duplicate packages
npm ls --all 2>/dev/null | grep -E 'deduped|UNMET' | head -10

# Find packages that could be lighter
grep -E '"(moment|lodash|date-fns|axios)"' package.json

Common replacements:

Heavy	Lighter Alternative	Savings
moment.js (~300KB)	date-fns (~20KB tree-shaken) or dayjs (~2KB)	95%+
lodash (~70KB)	lodash-es (tree-shakeable) or native	80%+
axios (~14KB)	fetch (built-in)	100%
classnames (~1KB)	clsx (~0.5KB)	50%

3. Tree-Shaking Analysis

# Find namespace imports that prevent tree-shaking
grep -rn "import \* as" src/ --include='*.ts' --include='*.tsx' | \
  grep -v 'React\|next' | head -10

# Find barrel file re-exports
find src/ -name 'index.ts' -exec grep -l 'export \*' {} \; | head -10

# Check for side-effect imports
grep -rn "^import '" src/ --include='*.ts' --include='*.tsx' | head -10

4. Code Splitting

# Check for dynamic imports (good)
grep -rn 'dynamic(\|lazy(' src/ --include='*.tsx' | wc -l

# Check total page/route count vs dynamic imports
find src/app src/pages -name 'page.tsx' -o -name '*.page.tsx' 2>/dev/null | wc -l

# Find heavy components that should be code-split
find src/components -name '*.tsx' -size +10k | while read f; do
  echo "$(wc -l < \"$f\") lines  $(du -k \"$f\" | cut -f1)KB  $f"
done | sort -rn | head -10