Easy Svelte Optimize

Optimize Svelte and SvelteKit applications for performance with bundle analysis, rendering profiling, lazy loading implementation, and build configuration tuning.

When to Use This Command

Run this command when...

• Your Svelte application loads slowly and you need to identify and fix the largest performance bottlenecks across bundle size, rendering, and network requests
• You want to implement lazy loading, code splitting, or image optimization in your SvelteKit application with correct framework patterns
• Your build output is larger than expected and you need to analyze the bundle composition and eliminate dead code or heavy dependencies

Do NOT use this command when...

• Your application has no measurable performance problems -- premature optimization adds complexity without benefit
• You need runtime profiling of server-side Node.js code rather than client-side Svelte rendering

Quick Start

Copy
# .claude/commands/easy-svelte-optimize.md
# Optimize Svelte performance
Optimize: $ARGUMENTS

Copy
# Run the command
claude "easy-svelte-optimize reduce initial bundle size and implement route-based code splitting"

Expected output:
- Bundle analysis with size breakdown by module
- Top 5 optimization recommendations ranked by impact
- Code splitting implementation for routes
- Lazy loading patterns for heavy components
- Before/after size comparison estimates

Core Concepts

Concept	Description
Bundle Analysis	Visualizing JavaScript bundle composition to identify oversized dependencies
Code Splitting	Breaking the application into chunks loaded on demand per route or feature
Tree Shaking	Eliminating unused exports from the final bundle during build
Rendering Optimization	Reducing unnecessary component re-renders with keyed each blocks and tick batching
Preloading Strategy	Configuring SvelteKit preload to fetch data and code before navigation

Optimization Pipeline:

  Current Application
       |
  [Analyze Bundle]
       |
  +----+----+----+----+
  |    |    |    |    |
 Size Render Load  Build Assets
  |    |    |    |    |
  [Rank by Impact]
       |
  [Apply Fixes]
       |
  [Measure Improvement]
       |
  Optimized Application

Configuration

Parameter	Default	Description
Analysis Tool	rollup-plugin-visualizer	Bundle analysis visualization plugin
Target Metric	Largest Contentful Paint	Primary web vital to optimize for
Splitting Strategy	Route-based	Code splitting by route, feature, or component
Image Format	WebP + fallback	Target image format for optimization
Build Target	Production	Optimization targets production build configuration

Best Practices

1. Measure before optimizing -- run the analysis first to identify actual bottlenecks. The largest dependency or slowest render may not be what you expect
2. Target the biggest wins first -- a single 200KB dependency replacement delivers more impact than micro-optimizing ten 5KB utilities
3. Use dynamic imports for heavy features -- wrap infrequently-used components like charts, editors, or admin panels in dynamic imports with loading states
4. Optimize images aggressively -- use SvelteKit enhanced:img or a CDN with automatic format conversion. Images are often the single largest page weight contributor
5. Test on slow connections -- throttle your network to 3G in DevTools to experience what real users on mobile networks encounter

Common Issues

1. Bundle size unchanged after tree shaking -- the dependency may not support ES modules. Check if a lighter alternative exists or configure the build to handle CommonJS properly
2. Code splitting creates too many chunks -- overly granular splitting increases HTTP requests. Group related features into logical chunks rather than splitting every component
3. Performance regression after optimization -- aggressive lazy loading can cause layout shift. Add skeleton screens and explicit dimensions to prevent cumulative layout shift