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)
$ 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
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 |
$ 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
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
I think, to be fair, there are different types of bubbles we live in. If you have to develop a site that needs to be used by the west and the far stretches of the east at the same time, you are more likely aware of how a website needs to work on a mobile phone with bandwidth choking than you are if you are advertising an iPad to people that you can mostly guarantee will have a good connection, the latest browser(s) and a fast device.
Software provided to eastern schools for example or poor regions (some in areas where finding a good local hosting provider is nearly impossible) has to be more efficient because schools have bandwidth limitations and it's spread thinly over the masses. People struggle with 4g connections and so on. You can't be feeding them 4MB of frameworks per student per device if only 100kb of that framework gets used.
If a company is adding 10X more code to the existing frame work (like I believe you mean) then that makes the situation even worse because the end user is downloading even more JS and CSS on top of the framework designed to make things efficient in the first place.
Anyway, I agree, there are different bubbles we live in so taking all of them into account is important based on the goal.
Take it easy NullVoxPopuli.