DEV Community

Discussion on: JavaScript Framework TodoMVC Size Comparison

Collapse
 
ninjin profile image
Jin • Edited

I've done these measurements with $mol-based implementation: todomvc.hyoo.ru/

It uses a radically different approach to build. For example, there is no separation into vendor and application bundles. In addition, styles, scripts and some images fall into a single bundle.

By the way, it would be necessary to add not only the size of JS to the measurements in a good way, but also the size of CSS, since it is no less important and strongly depends on the techniques used in the framework for working with styles. Oh well.

The total bundle of $hyoo_todomvc without minification and with gzip compression weighs 27.6KB. Let's assume that after minification, cutting out styles, images and compressing brotli, this size will be reduced to 21.5KB (online tools failed, and I'm too lazy to start it all locally, but let's take a very conservative estimate). If we throw out the reused code, styles and images, then the remaining pure JS code $hyoo_todomvc after minification and brotli weighs 1.5KB (online tools have coped here). That is, the non-specific code for $hyoo_todomvc is <=20KB.

We get the following picture:

1 5 10 20 40 80
$mol 21.5 27.5 35 50 80 140

It seems to be a lot. However, the $mol implementation does a bit more than the rest:

  1. Rendering is automatically virtualized, which gives fast operation even of huge task lists. Virtualization in other frameworks will make them much heavier. And as the application grows, virtualization will inevitably be required.
  2. $hyoo_todomvc is a self-contained but fully controlled component. Adding a comparable number of extension points to other frameworks will make the component heavier by at least an order of magnitude.
  3. And other pleasant little things. Like remembering scroll positions, showing errors in emergency situations, graceful log and debug etc.