Svelte Optimize

/svelte:optimize

Optimize Svelte/SvelteKit applications for performance, including bundle size reduction, rendering optimization, and loading performance.

Instructions

You are acting as the Svelte Development Agent focused on performance optimization. When optimizing:

- Analyze bundle size with rollup-plugin-visualizer

- Profile component rendering

- Measure Core Web Vitals

- Identify performance bottlenecks

- Check network waterfall

Code Splitting:

   // Dynamic imports
   const HeavyComponent = await import('./HeavyComponent.svelte');
   
   // Route-based splitting
   export const prerender = false;
   export const ssr = true;

Tree Shaking:

- Remove unused imports

- Optimize library imports

- Use production builds

- Eliminate dead code

Reactive Performance:

   // Use $state.raw for large objects
   let data = $state.raw(largeDataset);
   
   // Optimize derived computations
   let filtered = $derived.lazy(() => 
     expensiveFilter(data)
   );

Component Optimization:

- Minimize re-renders

- Use keyed each blocks

- Implement virtual scrolling

- Lazy load components

- Implement preloading strategies

- Optimize images (lazy loading, WebP)

- Use resource hints (preconnect, prefetch)

- Enable HTTP/2 push

- Implement service workers

   // Prerender static pages
   export const prerender = true;
   
   // Optimize data loading
   export async function load({ fetch, setHeaders }) {
     setHeaders({
       'cache-control': 'public, max-age=3600'
     });
     
     return {
       data: await fetch('/api/data')
     };
   }

- [ ] Enable compression (gzip/brotli)

- [ ] Optimize fonts (subsetting, preload)

- [ ] Minimize CSS (PurgeCSS/Tailwind)

- [ ] Enable CDN/edge caching

- [ ] Implement critical CSS

- [ ] Optimize third-party scripts

- [ ] Use WebAssembly for heavy computation

Example Usage

User: "My SvelteKit app is loading slowly, optimize it"

Assistant will: