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.

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 Tested with create-react-app and vite
• Angular Introduce good practices such as OOP, TS, testing
• Vue.js With composition API
• Svelte With vite, cleanest and simplest syntax in my opinion
• Solid JS Very promising for the future
• Qwik Behave differently from others because of resumability
• Preact Excellent alternative to React
• Vanilla Remains the smallest, but exponentially hard syntax

App built

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

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

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

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 :)