Optimize Bundle Rapid

Rapidly analyze and reduce JavaScript or application bundle sizes through dependency auditing, code splitting, tree shaking, and lazy loading strategies.

When to Use This Command

Run this command when...

• Your application bundle size exceeds performance budgets and page load times are suffering
• You want to identify which dependencies contribute most to bundle bloat
• Code splitting and lazy loading need to be implemented or improved across your application routes
• A bundle analysis reveals large unused chunks that should be split or eliminated
• You need to reduce initial load size for mobile users or low-bandwidth environments

Quick Start

Copy
# .claude/commands/optimize-bundle-rapid.md
---
name: Optimize Bundle Rapid
description: Analyze and reduce bundle sizes with splitting and tree shaking
command: true
---
Optimize bundle: $ARGUMENTS

1. Analyze current bundle composition and sizes
2. Identify large dependencies and unused code
3. Implement code splitting and lazy loading
4. Configure tree shaking and dead code elimination
5. Measure size reduction and loading improvement

Copy
# Invoke the command
claude "/optimize-bundle-rapid reduce main bundle below 200KB"

# Expected output
# > Analyzing bundle composition...
# > Current main bundle: 482KB (gzipped: 156KB)
# > Top contributors:
# >   moment.js: 72KB (locale data unused - replace with dayjs)
# >   lodash: 68KB (only 4 functions used - switch to lodash-es)
# >   chart.js: 54KB (only used on /dashboard - lazy load)
# >   unused components: 38KB (dead code detected)
# > Applying optimizations...
# >   1. Replaced moment.js with dayjs (-70KB)
# >   2. Switched to lodash-es with tree shaking (-61KB)
# >   3. Lazy-loaded chart.js on /dashboard route (-54KB)
# >   4. Removed 12 unused component files (-38KB)
# > Result: 482KB -> 259KB (46% reduction, gzipped: 84KB)

Core Concepts

Concept	Description
Bundle Analysis	Visualizes the composition of each bundle chunk showing package sizes
Dependency Audit	Identifies oversized, duplicated, or replaceable dependencies
Code Splitting	Separates the bundle into chunks loaded on demand per route or feature
Tree Shaking	Eliminates dead code and unused exports from the final bundle
Lazy Loading	Defers loading of non-critical components until they are actually needed

Bundle Optimization Strategy
==============================

  [Analyze]           [Audit]            [Split]
  Bundle map          Dependencies       Route-based
  Chunk sizes         Duplicates         Feature-based
  Module graph        Alternatives       Dynamic imports
       |                   |                  |
       +--------+----------+--------+---------+
                |                    |
           [Tree Shake]         [Lazy Load]
           Remove unused        Defer non-critical
           Eliminate dead       Intersection observer
           Prune exports        Suspense boundaries
                |                    |
                +--------+-----------+
                         |
                    [Measure Result]
                    482KB -> 259KB

Configuration

Parameter	Description	Default	Example	Required
$ARGUMENTS	Target bundle or size goal	main bundle	"reduce below 200KB"	No
size_budget	Maximum acceptable bundle size in KB	none	200	No
include_analysis	Generate visual bundle analysis report	true	false	No
replace_dependencies	Allow replacing large deps with lighter alternatives	true	false	No
splitting_strategy	Code splitting approach	route-based	"feature-based", "component"	No

Best Practices

1. Set explicit size budgets -- Define maximum bundle sizes per route. Without a target number, optimization has no clear completion criteria.

2. Replace heavy dependencies first -- Swapping moment.js for dayjs or lodash for lodash-es gives the biggest wins with the least code change. Always check for lighter alternatives.

3. Lazy load below the fold -- Components not visible on initial page render should be lazy-loaded. This includes modals, drawers, and below-fold content sections.

4. Monitor bundle size in CI -- Add bundle size checks to your CI pipeline to prevent regressions. Tools like bundlesize or size-limit enforce budgets automatically.

5. Audit after dependency updates -- New dependency versions may add or remove features that change bundle impact. Re-analyze after major version bumps.

Common Issues

Lazy loading introduces loading spinners: Splitting too aggressively causes visible loading states on navigation. Pre-fetch likely routes with <link rel="prefetch"> or router-level prefetching to smooth transitions.

Tree shaking ineffective with CommonJS: Tree shaking only works with ES modules (import/export). CommonJS (require) cannot be statically analyzed. Verify dependencies ship ESM builds.

Duplicate packages in different chunks: Different versions of the same package may appear in multiple chunks. Use dependency resolution in your package manager to deduplicate versions.