DEV Community

Russell 👨🏾‍💻
Russell 👨🏾‍💻

Posted on

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)