DEV Community

Did you know you can change how SvelteKit bundles your entire app?

When using adapter-static, most people focus on prerendering and deployment targets. But there is another lever that quietly affects performance and portability: output.bundleStrategy.

By default, SvelteKit splits your app into multiple chunks for better caching and lazy loading. That is usually what you want.

But if you are building:
β€’ A fully static site
β€’ An embeddable widget
β€’ A portable demo
β€’ A microfrontend
β€’ Something that needs to work cleanly from simple static hosting

You can switch strategies.
For example:
split β†’ multiple JS/CSS files, better caching
single β†’ one JS file and one CSS file
inline β†’ everything injected directly into the HTML

With adapter-static, this can make your build output dramatically simpler, depending on your use case.
Sometimes performance and portability decisions start in your config file, not your components.

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter(),
    output: {
      bundleStrategy: 'single'
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

Top comments (0)