So far I’ve mainly looked at Svelte as a framework for creating independent widgets on web pages. One of the most appealing features of Svelte is the tiny bundle size, but what happens to the bundle size if you use Svelte to build a traditional SPA? In this article I take a look at the impact of adding routing and forms to one of my Svelte applications.
The application I decided to build is a simple RSS reader with routing and a form for entering news sources. I am in no way a Svelte expert, but you can find my application on Github if you are interested. In addition to the Svelte frontend I have added a .Net backend to the same project.
In order to unify the build of both tech stacks I am using Bazel as the single build tool for the entire application. You can read more about Bazel in a previous article if you are interested.
I am also using the Google Closure compiler to produce the smallest bundle size possible. You may want to check out my other article for a primer if you are new to the Closure compiler.
Third Party Libraries
In addition to vanilla Svelte I decided to include two external libraries. Since this is my first time navigating the ecosystem of external Svelte libraries, I wasn’t sure which libraries to pick, but ended up with svelte-routing for routing and svelte-forms-lib for my form.
I am used to seeing single digit bundle sizes when creating simple Svelte widgets, but was curious how much the application would grow when adding mandatory SPA features like forms and routing. Would the bundles start to look more like Angular/React bundles or would Svelte still stand out as a framework with a tiny footprint?
I was pleased to see that the application remained tiny at 10.5k gzipped (23.8k uncompressed). Of course some of this is from using the Closure compiler. If I switch to a Rollup with Terser toolchain the numbers increase a bit to 16k gzipped (52.1k uncompressed). However, Svelte’s general compatibility with Closure is what makes it possible to even consider the Closure compiler.
I still consider Svelte with Closure compiler, and even Bazel, to be experimental, but it’s very promising to be able to create full SPA with a bundle size of 10.5k! Most frameworks don’t even come close to this for a simple Hello World application.