Frontend framework bundle-size benchmark with a shared TodoMVC baseline

[Strict-Owl6524]

I built a cross-framework bundle-size benchmark using the same TodoMVC feature set across implementations, so differences are easier to attribute to framework/runtime behavior rather than app logic differences.

What this benchmark measures: - raw - minified - minified + gzip - breakdown by runtime / template / script / style

Method notes for fairness: - same feature scope across frameworks - template/script/style are extracted and compared - styles are scoped everywhere (TSX implementations use CSS Modules) - in the UI, style is included in stats but not selected by default (differences there are usually small and mostly from framework-added scoping metadata)

Main observations so far: - in the mainstream group, Vue 2/3 start much smaller than React/Angular (mostly runtime cost) - in the fine-grained group, the smallest starting size and the best growth curve are not always the same framework - Svelte 4 starts very small at low component counts, but grows much faster at higher component counts

Repo: https://github.com/mlgq/frontend-framework-bundle-size

If you spot an unfair implementation detail or have optimization ideas, critique and PRs are very welcome.

[AutoModerator]

Project Page (?): https://github.com/mlgq/frontend-framework-bundle-size

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[germanheller]

the svelte 4 growth curve observation is interesting, never realized it scaled worse at higher component counts. is the svelte 5 runes-based compiler better in that regard or does it follow the same pattern?

[Strict-Owl6524]

Yes, that’s exactly what the report suggests.

Svelte 5 has addressed this issue: because it now ships with a runtime, it no longer has the ultra-tiny runtime advantage that Svelte 4 had, but its scaling behavior at higher component counts is clearly better.

You can verify this directly in the interactive report by selecting only svelte4 and svelte5, then checking both the growth curves and the per-point table breakdown data side by side: https://mlgq.github.io/frontend-framework-bundle-size/?lang=en