Which JS Framework is the smallest?
Tags: frontend, javascript, typescript, webdev
Published: 2023-07-13 10:09:20

> Which JS Framework build the smallest minified JS bundle? And which one has the smallest development folder?

Probably the most complete study about benchmarking JS Front-end Frameworks is the [Benchmark by Krausest](https://krausest.github.io/js-framework-benchmark/2022/table_chrome_104_windows.html).

![Benchmark by Krausest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnf6bfynhnkehsxe8qdo.png)

This study focuses on the time execution, CPU performances, lighthouse metrics as well as memory allocation.

But There's no indication about those criteria:

- The syntax quality for developers
- The size of the development folder (all node modules included)
- The size of the built webapp and distributed to browsers
- The size of the JS minified bundle in the built app

It is to rank most known Front-ent JS Frameworks that I build the **exact same app** with several frameworks and compared them.

## Frameworks tested

As I already know Angular, React and Svelte, I was able to also try modern frameworks, that are often simple to get started because they are often very similar to react : components are functions returning JSX elements (tsx in my case, I only used TypeScript).

- [React](https://react.dev/) *Tested with `create-react-app` and `vite`*
- [Angular](https://angular.io/) *Introduce good practices such as OOP, TS, testing*
- [Vue.js](https://vuejs.org/) *With composition API*
- [Svelte](https://svelte.dev/) *With vite, cleanest and simplest syntax in my opinion*
- [Solid JS](https://www.solidjs.com/) *Very promising for the future*
- [Qwik](https://qwik.builder.io/) *Behave differently from others because of resumability*
- [Preact](https://preactjs.com/) *Excellent alternative to React*
- [Vanilla](http://vanilla-js.com/) *Remains the smallest, but exponentially hard syntax*

## App built

![App look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qs96fy8b33aen6swfs2.png)

I built a simple SPA app in all of the frameworks, the app:
- Displays a constant name of the app as well as a SVG logo
- Has an incrementing reactive variable
- Has a text input pushing its content into an array when focused is lost or when enter is pressed.
- Displays the the content of the list, where each element calls another component (called MessageComponent and displaying the message and the date time of it's creation)
- Save into localhost the list content
- Has a button to empty the list

All the apps works similar and has the same CSS parts.

All the apps use a main component that call in a for loop the message component.

## GitHub repository

You can find more information about the project as well as the source code of all apps in [this repo](https://github.com/MarioVieilledent/js-framework-comparison)

## Results

### Size of minified JS bundle in KB

Here I compare the size of the minified JS bundle (built by `npm run build`, or `ng build --configuration=production`, etc.).

*Lower is better*

![Size of JS bundles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sbezm0yiel8x97ihmnv.png)

Here we can observe that React has the largest bundle size, exceeding half a megabyte of JavaScript code. Although this may seem relatively small, it is important to consider that each time the page is refreshed, the entire bundle needs to be transmitted over the network and interpreted by the browser. Therefore, we aim to make the JS bundle as lightweight as possible.

The React app built with Vite is nearly four times smaller, around 140 KB, and is comparable to Angular. However, both of these apps still have a significant size.

Next, we have Qwik and Vue, which are approximately 50 KB in size, even smaller than the previous frameworks. In this comparison between the three major frameworks, Vue emerges as the winner. It is worth noting that Qwik differs from other frameworks because it utilizes resumability, which means that only a small portion of the JS bundle is loaded and interpreted by the browser when necessary.

Now, let's talk about the winners: Preact, Solid.js, and Svelte. These frameworks have incredibly small JS bundles, measuring at 13.7 KB, 10 KB, and 6.7 KB respectively. This is significantly smaller compared to the other frameworks! Both Preact and Solid serve as excellent alternatives to React, as they employ similar (or very close) syntax. In my opinion, Svelte is the best among them all due to its clean, easy-to-understand, and expressive syntax.

Lastly, it's important to mention that there is no "minified JS bundle" in Vanilla JS since it does not involve any specific framework. Even with minimal DOM manipulation, a Vanilla JS file can still reach a size of 1.1 KB (which is not far off from the Svelte JS bundle...).

### Size of development folder in MB

In this second part, I take a look at the total size of the development folder including all the node modules dependencies.

*Lower is better*

![Size of dev folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpavtxfei8w7tjzt64gg.png)

The heaviest framework for the development phase is `Angular`, climbing up to almost half a giga byte of data. That's pretty huge considering the app builded is a simple page with a reactive button and a reactive list.

`React` and `Qwik` are smaller, respectively 293 and 169 MB.

Then comes all the other frameworks that are close to each other, around 100 MB.

Of course `Vanilla JS` doesn't require any dependency, because there's no difference between the development and the production code.

## Expressiveness

In my opinion:

- `Svelte` and `Vue` (using Components API) wins the battle, they provides the **simplest and most declarative syntax**.
- `Angular` has also a nice declarative syntax on top of a great organisation of components. Though, it can result in a lot of src files to handle. And is a bit hard to start with.
- `React`, `Qwik` and `Solid` components return JSX that contains JavaScript expressions, this focus on more and smaller reusable components (especially compared to the heavy `Angular` components), but have the drawback to mix HTML and JS code together, so it can be confusing, and the MVC is hard to achieve.

In any case, vanilla JS is to be avoided for any kind of projects.

---

Thank you for reading, I would love to hear your thoughts on this project :)