How does SvelteKit handle static asset optimization?
Answer
SvelteKit uses Vite for asset optimization during builds. JavaScript/CSS: Rollup-based bundling, tree-shaking, code splitting by route, and minification. Images: the @sveltejs/enhanced-img package provides the <enhanced:img> component that automatically generates srcset for responsive images, converts to WebP/AVIF, and adds width/height to prevent layout shift. Static assets: files in static/ are served as-is with cache headers. Files imported in components get content-hashed filenames: import logo from './logo.png' → /assets/logo.a1b2c3.png. Fonts: import in CSS; Vite optimizes them. Preloading: SvelteKit generates <link rel="preload"> hints for critical resources. Service Worker: src/service-worker.js enables offline support and custom caching strategies. Adapter-specific optimization: adapter-vercel splits bundles for Vercel's edge network; adapter-cloudflare optimizes for Workers' memory constraints.
Previous
What is the SvelteKit shallow routing feature?
Next
What is Svelte's approach to accessibility?
More Svelte / SvelteKit Questions
View all →- Advanced How does Svelte 5's reactivity model with $state differ from Svelte 4?
- Advanced What is SvelteKit's data loading waterfall problem and how do you solve it?
- Advanced How do you implement real-time features in SvelteKit?
- Advanced What is the SvelteKit shallow routing feature?
- Advanced What is Svelte's approach to accessibility?