Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan  4 22:03 angular2.min.js
563K Jan  4 22:05 angular2.0.0-beta.0-all.umd.min.js
486K Jan  4 21:50 ember.1.13.8.min.js
435K Jan  4 21:48 ember.2.2.0.min.js
205K Jan  4 22:06 angular2.0.0-beta.0-Rx.min.js
144K Jan  4 21:59 react-with-addons-0.14.5.min.js
143K Jan  4 21:46 angular.1.4.5.min.js
132K Jan  4 21:56 react-0.14.5.min.js
121K Jan  4 21:35 angular.1.3.2.min.js
5.3K Jan  4 22:00 redux-3.0.5.min.js
706B Jan  4 21:57 react-dom-0.14.5.min.js
63K  Oct 13 03:02 vue-2.0.3.min.js

# 2017
91K  Dec 27 12:24 react-dom-16.2.0.production.min.js
6.5K Dec 27 12:22 react-16.2.0.production.min.js
This gives us following approximations
Name Size
Ember 2.2.0 435K
Ember 1.13.8 486K
Angular 2 566K
Angular 2 + Rx 766K
Angular 1.4.5 143K
Vue 2.4.2 58.8K
Inferno 1.2.2 48K
Preact 7.2.0 16K
React 0.14.5 + React DOM 133K
React 0.14.5 + React DOM + Redux 139K
React 16.2.0 + React DOM 97.5K

GZipped and minified (plain output)

$ gzip -r .
$ ls -lhS
123K Jan  4 22:11 ember.1.13.8.min.js.gz
119K Jan  4 22:11 angular2.0.0-beta.0-all.umd.min.js.gz
111K Jan  4 22:11 ember.2.2.0.min.js.gz
111K Jan  4 22:11 angular2.min.js.gz
51K Jan  4 22:11 angular.1.4.5.min.js.gz
45K Jan  4 22:11 angular.1.3.2.min.js.gz
42K Jan  4 22:11 react-with-addons-0.14.5.min.js.gz
39K Jan  4 22:11 react-0.14.5.min.js.gz
32K Jan  4 22:11 angular2.0.0-beta.0-Rx.min.js.gz
1.9K Jan  4 22:11 redux-3.0.5.min.js.gz
455B Jan  4 22:11 react-dom-0.14.5.min.js.gz
23K  Oct 13 03:02 vue-2.0.3.min.js.gz

#2017
29K Dec 27 12:24 react-dom-16.2.0.production.min.js.gz
2.8K Dec 27 12:22 react-16.2.0.production.min.js.gz
63K Dec 27 13:18 aurelia-core-1.0.2.min.js.gz
Approximations for GZipped versions
Name Size
Ember 2.2.0 111K
Ember 1.13.8 123K
Angular 2 111K
Angular 2 + Rx 143K
Angular 1.4.5 51K
React 0.14.5 + React DOM 40K
React 0.14.5 + React DOM + Redux 42K
React 15.3.0 + React DOM 43K
React 16.2.0 + React DOM 31.8K
Vue 2.4.2 20.9K
Inferno 1.2.2 20K
Preact 7.2.0 4kb
Aurelia 1.0.2 63K

Also take a look at this awesome tool https://cost-of-modules.herokuapp.com created by @pastelsky

@backspaces
Copy link

backspaces commented Jul 6, 2018

Fascinating stuff! Now for the noob question of the week! :)

I have a repo that has a UMD and ESM rollup, both with/without use of minify.

How do I add gzipping to this? Is it done by the CDN automatically? (I use unpkg.com mainly) Or do I need to add gzipping to my workflow?

@biwerr
Copy link

biwerr commented Jul 9, 2018

@backspaces

How do I add gzipping to this? Is it done by the CDN automatically? (I use unpkg.com mainly) Or do I need to add gzipping to my workflow?

Gzip is mostly done by your webserver, if enabled. See https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

@sadeghbarati
Copy link

sadeghbarati commented Jul 18, 2018

Moon.js
Monkberry.js

@frenzzy
Copy link

frenzzy commented Aug 7, 2018

@Restuta could you add Hyperapp to the list please? It is 1 kB framework with functionality like React+Redux together.

@NullVoxPopuli
Copy link

NullVoxPopuli commented Oct 3, 2018

as of today ember 3.4 is 138kb
https://emberclear.io/bundle.html

as of 2019-10-12: ember 3.14 is 112kb

@SandeepVattapparambil
Copy link

SandeepVattapparambil commented Oct 9, 2018

Great !

@IngwiePhoenix
Copy link

IngwiePhoenix commented Dec 6, 2018

I love this list! I mean, not everyone has insane bandwidth... At least, over here in Germany, I tend to get about 500kb/s sometimes :/ I do have a provider and contract that let's me use LTE, but not everywhere can I receive that :) It's always a good idea to have those sizes in mind - in fact, I see it as part of deciding for the target group an application is meant to go for, as, depending on the chosen group, they may have more or less bandwidth, or are more or less leant towards spending time to wait for content. Thank you for making this list! Although, it'd be nice if the list was ordered by size :)

@laurentpayot
Copy link

laurentpayot commented Dec 10, 2018

If you guys care about JS framework sizes, have a look at Svelte. 0kb is hard to beat.

@DayBr3ak
Copy link

DayBr3ak commented Feb 1, 2019

Angular 2 compiles down your app to a bundle. The library size is not representative at all for the final app size. This comparison is plain wrong if you care about app size.

@antony
Copy link

antony commented Feb 26, 2019

If you guys care about JS framework sizes, have a look at Svelte. 0kb is hard to beat.

Exactly :) plus the speed increase from not having to interpret client-side.

@vahidalvandi
Copy link

vahidalvandi commented Mar 29, 2019

thanks vue.js

@praisedpk
Copy link

praisedpk commented Jul 10, 2019

Ember 2.2.0 is 111K when gzipped, and only 93K when compressed using brotli (q11) compression. That's 18 KB of noticeable saving.
You can get highly compressed javascript libraries on PageCDN. See:
jQuery CDN
Bootstrap CDN
Ember CDN
Vue CDN
Angular CDN
React CDN
and others.

@Restuta
Copy link
Author

Restuta commented Oct 10, 2019

Thank you @praisedpk

@Restuta
Copy link
Author

Restuta commented Oct 10, 2019

@NullVoxPopuli I can't seem to find it on cdnjs (that specific version)

@Restuta
Copy link
Author

Restuta commented Oct 13, 2019

@DayBr3ak

This comparison is plain wrong if you care about app size.

I don't think a compiled list of sizes pulled from public CDN could be wrong in a way you presented. It's up to you which comparison to make and what conclusions to make.

Angular 2 compiles down your app to a bundle. The library size is not representative at all for the final app size.

This implies that compiling your app to a bundle is the only way of using Angular 2. I think it's this implication that is wrong. There are different ways to compile most of the frameworks and, usually, the more sophisticated compiler is the better the results are. At the same time, it's not uncommon to not use a compiler at all and just pull libraries from CDN directly. Therefore this comparison could be useful if you are doing that.

@NullVoxPopuli
Copy link

NullVoxPopuli commented Oct 13, 2019

@Restuta, ember isn't going to be on cdnjs, because it's part of a framework and requires ember-cli to build along with your app.
Today, Ember 3.14 is 112-116kb min+gzip. See: https://emberclear.io/bundle.html I'm not sure why the analysis shows ember in there twice. my downloaded files don't include it twice 🤷‍♂️

@JayTailor45
Copy link

JayTailor45 commented Jun 2, 2020

Is it updated?

@NullVoxPopuli
Copy link

NullVoxPopuli commented Jul 2, 2020

is what updated? my link? yes :D
https://emberclear.io/bundle/broccoli.html

ember 3.19 is 116kb min+gzip.

@jamesta696
Copy link

jamesta696 commented Oct 14, 2020

Is it possible to get this updated?
I would really appreciate it 🙏

@NullVoxPopuli
Copy link

NullVoxPopuli commented Oct 15, 2020

https://emberclear.io/bundle/broccoli.html

ember 3.22 is 114kb (min+gzip)

@Skaant
Copy link

Skaant commented Jan 11, 2021

Any thoughts about the CPU usage of zipping (server) and extracting (browser) files ? It's moving the cost of bandwidth to CPU, which should be taken in consideration

@Skaant
Copy link

Skaant commented Jan 11, 2021

In an age where everyone in the free world has ridiculous bandwidth, does the size of the javascript framework really matter? I do appreciate your efforts, and the size difference is interesting.

Your comment is a bit old and you may have changed your mind since but I feel the need to mention two things about your comment :

  • Rich world and free world are not synonyms,
  • Do you imply that only rich people in rich countries deserve good internet usage conditions ?

@jamesta696
Copy link

jamesta696 commented Jan 11, 2021

Framework Size does matter, it shows your total LOC and architecture.
If you can achieve the same results + more features with a framework of 1400 lines of code and minimal dependencies VS a framework/library with 50,000 lines of code & hundreds/thousands of dependencies, it shows that framework has poor architecture for that many lines of code that another framework achieved the same features/concepts with very few lines of code + FASTER operations..etc.

Then again, just my opinion, right? :)
https://github.com/Arc2D-Framework/arc2d-skelton

@Olb
Copy link

Olb commented Jan 12, 2021

In an age where everyone in the free world has ridiculous bandwidth, does the size of the javascript framework really matter? I do appreciate your efforts, and the size difference is interesting.

Very much so. Many people live in areas that don't have the fastest connections such as Rural areas in the US and many countries in the world. Many countries, including the one I am in, charge for bandwidth and the connection speed is spotty even in the big cities. Where I work we target truck drivers with an app and they often have slow connections and the companies are charged for bandwidth differently than the average person.

@bhaltair
Copy link

bhaltair commented Jan 22, 2021

thx

@jorgellose
Copy link

jorgellose commented Apr 5, 2021

Any thoughts about the CPU usage of zipping (server) and extracting (browser) files ? It's moving the cost of bandwidth to CPU, which should be taken in consideration

You can just create gzip / brotli in build time and then deliver the compressed one based on http headers, the result is 0% CPU cost on your server and saving like 80% of the bandwidth, CPU cost in client side is negligible compared with the amount of KB he wont download.

@mimidotsuser
Copy link

mimidotsuser commented Feb 11, 2022

It's Feb 2022 and each framework keeps on adding more features.

Angular 13 is now 178.59 kb or 47.93 kb (min+gzip)
Ember 4.1.1 is now 673.77 kB or 179.33 kb min+gzip)

Angular 13 without routing is 100.80 kB or 29.42 kb (min+gzip)

@NullVoxPopuli
Copy link

NullVoxPopuli commented Feb 11, 2022

Ember 4.1.1 is now 673.77 kB or 179.33 kb min+gzip)

Sounds like you bundled the whole app? the starter packages, ember-data, ember-welcome-page etc aren't needed (css, images, etc)

Ya gotta do the bundle analysis graph and pick ember-source out (the meta package containing tho whole framework)::

@ChinmayMoghe
Copy link

ChinmayMoghe commented Mar 19, 2022

Add Svelte.JS, Solid as well , the bundle sizes will be much smaller for these frameworks.

@jamesta696
Copy link

jamesta696 commented Mar 23, 2022

Anyway you can add Arc2D on to this list? It's a W3C compliant native JavaScript ES6 Framework which has built in SPA, HTML5 WebComponents features and more.

Website: https://www.arc2d.com
Arc2D Docs: https://www.arc2d.com/resources/index.html?path=docs/topics/DocHome
Arc2D CDN Source: https://cdn.jsdelivr.net/gh/nashorn/od-cocoon@latest/framework.min.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment