Comparison of asset sizes for various front-end technologies

So I wanted to compare various implementations of the RealWorld example app front-end implementations. Below are totals for the Javascript/WASM asset sizes.

  • Svelte: 41KB
  • Elm: 90KB
  • Angular: 552KB
  • Vue: 582KB
  • React/Redux: 1MB
  • Seed-rs: 1.27MB

This is a very rough comparison that I did quickly, so may be errors, but a few things stand out:

  • complied languages (Elm, Svelte) produce relatively compact output
  • Seed-rs compiles to WASM, and is quite large. Not sure why this is – perhaps optimizations like dead code elimination are still in their infancy.

Elm

Seed-rs

React/Redux

Angular

Vue

Svelte

I asked on the Elm Slack if anyone knew why the Rust/wasm version was so large – one response:

luke:
wasm binaries have to ship with basic stuff like an allocator and whatever is used in the rust standard library since none of that is provided by the platform. even things like json decoding add up - it takes a surprisingly large amount of code just to parse a float correctly

The author of Elm has already done this analysis:

https://elm-lang.org/news/small-assets-without-the-headache

I was really excited when I first saw these results, but the RealWorld App is not that big. The Vue implementation is only about 2000 lines. So what about larger projects? We had a community member working on a 49,315 line application try the new version and he got 114kb after compilation, minification, and gzip. That is in the ballpark of the 100kb produced by the 2000 lines in the Vue implementation! So it looks like your projects need to get exceptionally large before you start running into the baseline issues you see in JavaScript.

The current Simple IoT frontend codebase is ~4K SLOC. It is not too likely that many applications SIOT is tragetting will reach 10x this size, but even then a 100K line project is still only 200kB – still not a huge deal for these types of applications where load time is not all that critical. And even then you could cache assets to make things load faster.

Listening to the author of Stork search talk about his project. The asset sizes for adding Stork to your page is listed here:

https://stork-search.net/changelog