Comparison of asset sizes for various front-end technologies

Software
, ,
#1

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

image
image1598×552 99.6 KB

Seed-rs

image
image1587×573 102 KB

React/Redux

image
image1600×542 101 KB

Angular

image
image1344×584 119 KB

Vue

image
image1348×557 113 KB

Svelte

image
image1354×597 120 KB

Episode #8 -- Using Elm for frontend development
#2

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

#3

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.

#4

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

image
image700×245 15.4 KB