How much does importing a framework in astro cost?

development javascript experiment

11 June 2025 | 3 min read

A quick little experiment to compare the memory footprint of using svelte vs. react vs. vanilla JS.

Inspired by an interaction I had with someone on X and a discussion at work with my coworker, a simple question sent me down a rabbit hole today:

Just how much does a framework really cost for a small, interactive component in Astro.js?

Astro usually ships only HTML + CSS to the client and the JS scripts that you add. No framework runtime, virtual DOM or anything similar. After building my personal blog with Astro and writing some initial code, curiosity struck:

How much impact would the header with a responsive mobile menu have on the build? To find out, the project was built three times within Astro, each time using a different approach, to compare the final production JavaScript bundle size for each.

I know pulling in a framework for such a trivial task is not necessary but for this simple comparison this task should be good enough.

The Experiment

Contenders

My methodology was simple:

Build the project and check the JS shipped to the browser for a page containing the page I already had and the header.

Build results

Page with

Let’s break that down.

Adding Svelte had a very reasonable cost of just ~22 KB. That’s a ~19% increase over the vanilla version, a price I’d happily pay for the improved DX. If another Svelte component was already on the page, the cost of adding the header was a mere 5 KB, due to the shared lib code.

Now I’m sure with more functionality and usage of the svelte features and it’s APIs the cost would most likely be more than 22 KB, I assume that’s a treeshaken result. Still: Impressive.

And then there was React.

For the exact same functionality, the React version weighed in at 294 KB and I was not able to get a SSR version in Astro, it had to be a pure CSR component. That’s a 182 KB overhead compared to the vanilla implementation. For a simple component, a header with a mobile toggle button, the cost of React was over 8 times the cost of Svelte.

I’m kinda baffled that react, to this day, is the industry standard, especially because it is known for it’s weight and complexity problems in large codebases. I prefer Svelte myself and had the privilige to work with Svelte and SvelteKit at work building real-world full-stack apps.

To be fair, for a massive, highly complex dashboard, the cost of a framework’s runtime is often justified. Even in react’s case. You’re getting a battle-tested ecosystem, and you’d spend a lot of time (and code) reinventing its features in vanilla JS.

Another point to consider is the size of the whole page you’re building. Compared to the size of many modern webpages containing lots of media the ~300 KB added by React aren’t really that significant.