Create a gist now

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 – Angular, Ember and React.

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

@coryhouse

This comment has been minimized.

Show comment
Hide comment
@coryhouse

coryhouse Jan 5, 2016

Thanks so much for compiling these and sharing them!

Thanks so much for compiling these and sharing them!

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Jan 6, 2016

@coryhouse you are very welcome =)

Owner

Restuta commented Jan 6, 2016

@coryhouse you are very welcome =)

@nii236

This comment has been minimized.

Show comment
Hide comment
@nii236

nii236 Jun 3, 2016

How does React 15 compare to 0.14?

nii236 commented Jun 3, 2016

How does React 15 compare to 0.14?

@PhilippMeissner

This comment has been minimized.

Show comment
Hide comment
@PhilippMeissner

PhilippMeissner Jun 23, 2016

You just saved me a good amount of time - Thanks!
Are you interested in adding more information to this, like the sizes of Elm or other popular/raising framworks?

PhilippMeissner commented Jun 23, 2016

You just saved me a good amount of time - Thanks!
Are you interested in adding more information to this, like the sizes of Elm or other popular/raising framworks?

@nueverest

This comment has been minimized.

Show comment
Hide comment
@nueverest

nueverest Aug 5, 2016

As of today Angular 2 beta 17 minified is around 620kB.

https://cdnjs.com/libraries/angular.js/

As of today Angular 2 beta 17 minified is around 620kB.

https://cdnjs.com/libraries/angular.js/

@keyboardSmasher

This comment has been minimized.

Show comment
Hide comment
@keyboardSmasher

keyboardSmasher Aug 14, 2016

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.

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.

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Aug 15, 2016

@keyboardSmasher it does for the world:

The average connection speed for Internet users worldwide, not just among these 50 countries, but all countries, is an average of 1.8 Mbit/s. As an average, this is actually pretty good, but as you’ve seen, there are plenty of extremes in either direction.

source http://royal.pingdom.com/2010/11/12/real-connection-speeds-for-internet-users-across-the-world/

Also browser has to evaluate JS and that is still kind of slow on mobile devices (https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889), so size is a good predictor of both, time to download and time to evaluate.

Owner

Restuta commented Aug 15, 2016

@keyboardSmasher it does for the world:

The average connection speed for Internet users worldwide, not just among these 50 countries, but all countries, is an average of 1.8 Mbit/s. As an average, this is actually pretty good, but as you’ve seen, there are plenty of extremes in either direction.

source http://royal.pingdom.com/2010/11/12/real-connection-speeds-for-internet-users-across-the-world/

Also browser has to evaluate JS and that is still kind of slow on mobile devices (https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889), so size is a good predictor of both, time to download and time to evaluate.

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Aug 15, 2016

@PhilippMeissner probably not, but feel free to fork and do that. With Elm in particular I am not sure how to evaluate, since it's basically a compiler and not a library.

Owner

Restuta commented Aug 15, 2016

@PhilippMeissner probably not, but feel free to fork and do that. With Elm in particular I am not sure how to evaluate, since it's basically a compiler and not a library.

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Aug 15, 2016

@nii236 15.3.0 is 43K gzipped

Owner

Restuta commented Aug 15, 2016

@nii236 15.3.0 is 43K gzipped

@jamesbondo

This comment has been minimized.

Show comment
Hide comment
@jamesbondo

jamesbondo Aug 17, 2016

angular2 is a graller

angular2 is a graller

@mjdude

This comment has been minimized.

Show comment
Hide comment
@mjdude

mjdude Aug 24, 2016

Thanks for compiling this. It's really informative.

mjdude commented Aug 24, 2016

Thanks for compiling this. It's really informative.

@noahcollins

This comment has been minimized.

Show comment
Hide comment
@noahcollins

noahcollins Sep 1, 2016

@keyboardSmasher even if most of your users have fast connections, fitting your render-critical bytes under the ~14KB TCP CWND threshold means no round trips to finish downloading the main payload. That's the top of your document, your critical CSS, and any critical app JS (if you're not rendering on server) -- all in about 14KB. The outcome is much quicker first paint and first useable paint. I find projects like preact and inferno to be very interesting for this reason.

All users regularly experience transient latency spikes, dropped packets, and so on. Browsers do a great drop masking network issues where they can, but if your "critical" bundle is large enough to require two, three, or more TCP round trips, your high-percentile render times will spike up accordingly. With an optimized bundle, you minimize the performance impact caused by varying network conditions and narrow the gap between your median and 90th percentile render times.

And to @Restuta's point, JS is expensive on mobile. The less JS that needs to be initially evaluated, the better your users' load times and battery life.

noahcollins commented Sep 1, 2016

@keyboardSmasher even if most of your users have fast connections, fitting your render-critical bytes under the ~14KB TCP CWND threshold means no round trips to finish downloading the main payload. That's the top of your document, your critical CSS, and any critical app JS (if you're not rendering on server) -- all in about 14KB. The outcome is much quicker first paint and first useable paint. I find projects like preact and inferno to be very interesting for this reason.

All users regularly experience transient latency spikes, dropped packets, and so on. Browsers do a great drop masking network issues where they can, but if your "critical" bundle is large enough to require two, three, or more TCP round trips, your high-percentile render times will spike up accordingly. With an optimized bundle, you minimize the performance impact caused by varying network conditions and narrow the gap between your median and 90th percentile render times.

And to @Restuta's point, JS is expensive on mobile. The less JS that needs to be initially evaluated, the better your users' load times and battery life.

@nkoehring

This comment has been minimized.

Show comment
Hide comment
@nkoehring

nkoehring Sep 5, 2016

@noahcollins Thanks for this interesting addition. Could you point me to more information about the transition window size? I found a lot of documentation and RFCs but I wonder how you got to the 14KBs. All I found was that it is calculated, not static.

@noahcollins Thanks for this interesting addition. Could you point me to more information about the transition window size? I found a lot of documentation and RFCs but I wonder how you got to the 14KBs. All I found was that it is calculated, not static.

@GabrielDelepine

This comment has been minimized.

Show comment
Hide comment
@GabrielDelepine

GabrielDelepine Sep 7, 2016

here @mgechev (Angular 2 core dev) explain how to produice a "Hello world" with Angular 2 under 50ko.

GabrielDelepine commented Sep 7, 2016

here @mgechev (Angular 2 core dev) explain how to produice a "Hello world" with Angular 2 under 50ko.

@agauniyal

This comment has been minimized.

Show comment
Hide comment
@agauniyal

agauniyal Sep 10, 2016

@keyboardSmasher depends on what your target audience is. In a country like India, your statistics are pretty screwed up, where there are 60kbps connections an average and a city's target audience greater than some country's, these factors play a role.

@keyboardSmasher depends on what your target audience is. In a country like India, your statistics are pretty screwed up, where there are 60kbps connections an average and a city's target audience greater than some country's, these factors play a role.

@ShaggyDude

This comment has been minimized.

Show comment
Hide comment

Meteor?

@farouk2u

This comment has been minimized.

Show comment
Hide comment
@farouk2u

farouk2u Sep 16, 2016

Thank you for sharing 👍

Thank you for sharing 👍

@shshaw

This comment has been minimized.

Show comment
Hide comment
@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Nov 5, 2016

@ShaggyDude feel free to PR, have no idea about Meteor.

Owner

Restuta commented Nov 5, 2016

@ShaggyDude feel free to PR, have no idea about Meteor.

@Restuta

This comment has been minimized.

Show comment
Hide comment
Owner

Restuta commented Nov 5, 2016

@shshaw added

@andrewshatnyy

This comment has been minimized.

Show comment
Hide comment

Backbone?

@pitaj

This comment has been minimized.

Show comment
Hide comment
@pitaj

pitaj Dec 1, 2016

FYI you left out Vue from the top table

pitaj commented Dec 1, 2016

FYI you left out Vue from the top table

@Mirodil

This comment has been minimized.

Show comment
Hide comment
@Mirodil

Mirodil Dec 7, 2016

aurelia?

Mirodil commented Dec 7, 2016

aurelia?

@trughooputh

This comment has been minimized.

Show comment
Hide comment

Thank you !

@jpoechill

This comment has been minimized.

Show comment
Hide comment

Beautiful

@NishantDesai1306

This comment has been minimized.

Show comment
Hide comment
@NishantDesai1306

NishantDesai1306 Dec 16, 2016

When whole app is made live then it will have other files as well in which business logic is implemented so I think that size of framework is just like adding a swimming pool to the river, and thinking about whether to add public swimming pool or olympic swimming pool.
The point I'm making is that it will not make any big difference to the water-level of river.
Correct me if I'm wrong.

When whole app is made live then it will have other files as well in which business logic is implemented so I think that size of framework is just like adding a swimming pool to the river, and thinking about whether to add public swimming pool or olympic swimming pool.
The point I'm making is that it will not make any big difference to the water-level of river.
Correct me if I'm wrong.

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Dec 19, 2016

@NishantDesai1306 correcting you, since you are wrong :) it depends on your app of it's a river or a small water drop. In my experience there are a lot of small/medium sized apps where extra 50-200 on makes a difference. Also framework size correlates with time it takes to evaluate this JS code when it's loaded by browser.

Also this is not the right place to debate if the size matters for some/most apps, its vice versa, of you think it is — this is a useful gist for you.

Owner

Restuta commented Dec 19, 2016

@NishantDesai1306 correcting you, since you are wrong :) it depends on your app of it's a river or a small water drop. In my experience there are a lot of small/medium sized apps where extra 50-200 on makes a difference. Also framework size correlates with time it takes to evaluate this JS code when it's loaded by browser.

Also this is not the right place to debate if the size matters for some/most apps, its vice versa, of you think it is — this is a useful gist for you.

@MajorScruffy

This comment has been minimized.

Show comment
Hide comment
@MajorScruffy

MajorScruffy Dec 22, 2016

What about Angular 2 without the compiler.
In a real world scenario you would use ahead of time compilation:
https://www.youtube.com/watch?v=_VnV7R4Ncwc

What about Angular 2 without the compiler.
In a real world scenario you would use ahead of time compilation:
https://www.youtube.com/watch?v=_VnV7R4Ncwc

@thovo

This comment has been minimized.

Show comment
Hide comment
@thovo

thovo Jan 3, 2017

Many thanks! Please allow me to use the number in my presentation! May we get an update on the size of each framework now?

thovo commented Jan 3, 2017

Many thanks! Please allow me to use the number in my presentation! May we get an update on the size of each framework now?

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Jan 5, 2017

@majorscuffy can you provide me with cdnjs link to a bundle you are referring to?

Owner

Restuta commented Jan 5, 2017

@majorscuffy can you provide me with cdnjs link to a bundle you are referring to?

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Jan 5, 2017

@thovo sure go ahead, can't promise update, but I can update the gist from your fork (if you'll create one)

Owner

Restuta commented Jan 5, 2017

@thovo sure go ahead, can't promise update, but I can update the gist from your fork (if you'll create one)

@variable-content

This comment has been minimized.

Show comment
Hide comment
@variable-content

variable-content Jan 21, 2017

@Restuta For Angular 2, clone this repo: https://github.com/blacksonic/angular2-aot-webpack, and run npm i && npm run build. It produces a slightly sub-optimal build that produces two app js files totaling 370kb, 90kb gzipped.

Also, I don't think it's accurate to include the examples with the Angular 2 + the entire RxJs library, the entire RxJs API is quite large and apps just need to include the functions they use, which is usually a much smaller subset of the entire library.

variable-content commented Jan 21, 2017

@Restuta For Angular 2, clone this repo: https://github.com/blacksonic/angular2-aot-webpack, and run npm i && npm run build. It produces a slightly sub-optimal build that produces two app js files totaling 370kb, 90kb gzipped.

Also, I don't think it's accurate to include the examples with the Angular 2 + the entire RxJs library, the entire RxJs API is quite large and apps just need to include the functions they use, which is usually a much smaller subset of the entire library.

@fgm

This comment has been minimized.

Show comment
Hide comment
@fgm

fgm Jan 26, 2017

Would be interesting to have at least one version of jQuery / jQuery mobile as a legacy starting point for comparison.

fgm commented Jan 26, 2017

Would be interesting to have at least one version of jQuery / jQuery mobile as a legacy starting point for comparison.

@Restuta

This comment has been minimized.

Show comment
Hide comment
Owner

Restuta commented Feb 6, 2017

@fgm why?

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Feb 6, 2017

@variable-content pre-compiled and tree-shaked bundles are beyond the point of this comparison. I am not sure why it's unfair, I took official bundle from CDN, is it a wrong one?

Owner

Restuta commented Feb 6, 2017

@variable-content pre-compiled and tree-shaked bundles are beyond the point of this comparison. I am not sure why it's unfair, I took official bundle from CDN, is it a wrong one?

@Baira

This comment has been minimized.

Show comment
Hide comment
@Baira

Baira Feb 12, 2017

Can you add preact and inferno please ? Also would love to see mobx combinations instead of RX

Baira commented Feb 12, 2017

Can you add preact and inferno please ? Also would love to see mobx combinations instead of RX

@theangryangel

This comment has been minimized.

Show comment
Hide comment
@theangryangel

theangryangel Feb 15, 2017

@Baira

Inferno 1.2.2 downloaded from the unpkg site on https://infernojs.org/docs/guides/installation

$ ls -lSh
total 48K
-rw-r--r-- 1 karl karl  24K Feb 15 10:08 inferno.min.js
-rw-r--r-- 1 karl karl 9.3K Feb 15 10:08 inferno-router.min.js
-rw-r--r-- 1 karl karl 4.0K Feb 15 10:08 inferno-component.min.js
$ gzip -r .
$ ls -lSh
total 20K
-rw-r--r-- 1 karl karl 9.0K Feb 15 10:08 inferno.min.js.gz
-rw-r--r-- 1 karl karl 3.6K Feb 15 10:08 inferno-router.min.js.gz
-rw-r--r-- 1 karl karl 1.6K Feb 15 10:08 inferno-component.min.js.gz

Preact 7.2.0 from cdnjs

$ ls -lSh
total 16K
-rw-r--r-- 1 karl karl 9.2K Jan 23 14:03 preact.min.js
$ gzip -r .
$ ls -lSh
total 4.0K
-rw-r--r-- 1 karl karl 3.9K Jan 23 14:03 preact.min.js.gz

@Baira

Inferno 1.2.2 downloaded from the unpkg site on https://infernojs.org/docs/guides/installation

$ ls -lSh
total 48K
-rw-r--r-- 1 karl karl  24K Feb 15 10:08 inferno.min.js
-rw-r--r-- 1 karl karl 9.3K Feb 15 10:08 inferno-router.min.js
-rw-r--r-- 1 karl karl 4.0K Feb 15 10:08 inferno-component.min.js
$ gzip -r .
$ ls -lSh
total 20K
-rw-r--r-- 1 karl karl 9.0K Feb 15 10:08 inferno.min.js.gz
-rw-r--r-- 1 karl karl 3.6K Feb 15 10:08 inferno-router.min.js.gz
-rw-r--r-- 1 karl karl 1.6K Feb 15 10:08 inferno-component.min.js.gz

Preact 7.2.0 from cdnjs

$ ls -lSh
total 16K
-rw-r--r-- 1 karl karl 9.2K Jan 23 14:03 preact.min.js
$ gzip -r .
$ ls -lSh
total 4.0K
-rw-r--r-- 1 karl karl 3.9K Jan 23 14:03 preact.min.js.gz
@schhunchha

This comment has been minimized.

Show comment
Hide comment
@schhunchha

schhunchha Feb 17, 2017

What all do we need with Vue to make it complete framework like Angular2?

What all do we need with Vue to make it complete framework like Angular2?

@claudiobernasconi

This comment has been minimized.

Show comment
Hide comment
@claudiobernasconi

claudiobernasconi Mar 3, 2017

The lastest available Vue.min.js (v.2.2.0) is now 74K in size. Maybe you want to add that to the list or update the 2.0.3 entry from above?

The lastest available Vue.min.js (v.2.2.0) is now 74K in size. Maybe you want to add that to the list or update the 2.0.3 entry from above?

@prostoandrei

This comment has been minimized.

Show comment
Hide comment
@prostoandrei

prostoandrei Apr 9, 2017

Hello world on Angular 2 with Angular Cli right now 76kb

Hello world on Angular 2 with Angular Cli right now 76kb

@pastelsky

This comment has been minimized.

Show comment
Hide comment
@pastelsky

pastelsky Apr 14, 2017

I made a small tool that'll let you query the bundled size (min + minzipped) of any such npm library -
https://cost-of-modules.herokuapp.com

I made a small tool that'll let you query the bundled size (min + minzipped) of any such npm library -
https://cost-of-modules.herokuapp.com

@sushant-j

This comment has been minimized.

Show comment
Hide comment
@sushant-j

sushant-j Apr 20, 2017

@pastelsky - Thanks a lot for this tool! Just what I was looking for.

@pastelsky - Thanks a lot for this tool! Just what I was looking for.

@jwhazel

This comment has been minimized.

Show comment
Hide comment
@jwhazel

jwhazel Apr 24, 2017

@pastelsky Thanks but app seems to be down?

jwhazel commented Apr 24, 2017

@pastelsky Thanks but app seems to be down?

@evanjmg

This comment has been minimized.

Show comment
Hide comment
@evanjmg

evanjmg Apr 26, 2017

Angular with AOT is around the same size of React now 48kb gzipped

evanjmg commented Apr 26, 2017

Angular with AOT is around the same size of React now 48kb gzipped

@Pinedo11

This comment has been minimized.

Show comment
Hide comment
@Pinedo11

Pinedo11 Apr 30, 2017

@Restuta can you include Angular 4 version? In official Angular page says

Smaller & Faster

Let's see if is it true or not ;)

Thanks!

@Restuta can you include Angular 4 version? In official Angular page says

Smaller & Faster

Let's see if is it true or not ;)

Thanks!

@kavoos

This comment has been minimized.

Show comment
Hide comment
@kavoos

kavoos May 1, 2017

Hi, I want the size of Angular v2.4.9. Which version should I pick from https://cdnjs.com/libraries/angular.js/?

kavoos commented May 1, 2017

Hi, I want the size of Angular v2.4.9. Which version should I pick from https://cdnjs.com/libraries/angular.js/?

@pastelsky

This comment has been minimized.

Show comment
Hide comment
@pastelsky

pastelsky May 16, 2017

@jwhazel should be up now.

@jwhazel should be up now.

@chaosmonster

This comment has been minimized.

Show comment
Hide comment
@chaosmonster

chaosmonster May 18, 2017

can you update the list, because angular is no longer in beta but in version 4 with AoT and so on

can you update the list, because angular is no longer in beta but in version 4 with AoT and so on

@anjmao

This comment has been minimized.

Show comment
Hide comment
@anjmao

anjmao Jun 19, 2017

There is example for angular 4 hello world app with closure compiler https://github.com/angular/closure-demo where Hello World app is 36kb.
I also added http and router modules for more real world scenarios and it was only 49kb.

anjmao commented Jun 19, 2017

There is example for angular 4 hello world app with closure compiler https://github.com/angular/closure-demo where Hello World app is 36kb.
I also added http and router modules for more real world scenarios and it was only 49kb.

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Jul 28, 2017

@pastelsky thank you for the tool, added it to the gist

Owner

Restuta commented Jul 28, 2017

@pastelsky thank you for the tool, added it to the gist

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Jul 28, 2017

@anjmao would you mind providing closure compiler versions of React, View and Ember? I see no point in posting just Angular.

Owner

Restuta commented Jul 28, 2017

@anjmao would you mind providing closure compiler versions of React, View and Ember? I see no point in posting just Angular.

@chrisalexander55

This comment has been minimized.

Show comment
Hide comment
@chrisalexander55

chrisalexander55 Sep 6, 2017

If you ever come to NYC, a beer is waiting for you! What an outstanding resource. Thank you!!

If you ever come to NYC, a beer is waiting for you! What an outstanding resource. Thank you!!

@Mobilunity-Com

This comment has been minimized.

Show comment
Hide comment
@Mobilunity-Com

Mobilunity-Com Sep 11, 2017

It seems like Angular 2 is much better than the rest, as it has more support, easy to learn and more configurable. Still, the biggest disadvantage is that it has dirty checking compromises performance and longer development time. Some programmers also say, that Angular is good for making only small application. At the same time, Ember has a lot of advantages. Some programmers have problems with learning it, but it uses accessors for better performance and the development time is much better than Angular’s one. As for React, it is a library and it must be used with other framework in combination, which makes it harder for beginners. We have also done the Angular and Ember comparison on our website: https://mobilunity.com/blog/ember-js-vs-angularjs-developers-2-business-models-to-build-a-team/

It seems like Angular 2 is much better than the rest, as it has more support, easy to learn and more configurable. Still, the biggest disadvantage is that it has dirty checking compromises performance and longer development time. Some programmers also say, that Angular is good for making only small application. At the same time, Ember has a lot of advantages. Some programmers have problems with learning it, but it uses accessors for better performance and the development time is much better than Angular’s one. As for React, it is a library and it must be used with other framework in combination, which makes it harder for beginners. We have also done the Angular and Ember comparison on our website: https://mobilunity.com/blog/ember-js-vs-angularjs-developers-2-business-models-to-build-a-team/

@chrisalexander55

This comment has been minimized.

Show comment
Hide comment
@chrisalexander55

chrisalexander55 Sep 11, 2017

@Mobilunity-Com A few corrections on your comment...

  1. Angular is not used for small projects. The primary use case it covers is for large, team-based SPAs.
  2. Accessors are not limited to Ember and all of the major FE frameworks leverage them using different syntaxic sugar.
  3. Developer UX is highly subjective and is dependent on numerous factors which require coverage beyond your shallow conclusions.
  4. And clearly, you comment was a troll to drive traffic to your article. But based on your poor generalizations, it probably isn't worth reading (certainly I won't).

People, as a general rule: experiment and measure! You know your requirements, performance budget, target platforms/devices, timeline, etc. Choose what works best for you as an individual and/or your team. Don't blindly accept technical advice from trolling 3rd-party commenters.

@Mobilunity-Com A few corrections on your comment...

  1. Angular is not used for small projects. The primary use case it covers is for large, team-based SPAs.
  2. Accessors are not limited to Ember and all of the major FE frameworks leverage them using different syntaxic sugar.
  3. Developer UX is highly subjective and is dependent on numerous factors which require coverage beyond your shallow conclusions.
  4. And clearly, you comment was a troll to drive traffic to your article. But based on your poor generalizations, it probably isn't worth reading (certainly I won't).

People, as a general rule: experiment and measure! You know your requirements, performance budget, target platforms/devices, timeline, etc. Choose what works best for you as an individual and/or your team. Don't blindly accept technical advice from trolling 3rd-party commenters.

@djedi

This comment has been minimized.

Show comment
Hide comment
@djedi

djedi Sep 20, 2017

Where is Aurelia?

djedi commented Sep 20, 2017

Where is Aurelia?

@lcpriest

This comment has been minimized.

Show comment
Hide comment
@lcpriest

lcpriest Sep 26, 2017

@Restuta I'm not sure if you are looking for additions, but glimmer.js came out as 108.46 KB (30.29 KB gzipped) for me.

lcpriest commented Sep 26, 2017

@Restuta I'm not sure if you are looking for additions, but glimmer.js came out as 108.46 KB (30.29 KB gzipped) for me.

@amorenew

This comment has been minimized.

Show comment
Hide comment
@amorenew

amorenew Sep 27, 2017

@Restuta React 16 released:
react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).
That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).
https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

amorenew commented Sep 27, 2017

@Restuta React 16 released:
react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).
That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).
https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

@teury

This comment has been minimized.

Show comment
Hide comment

teury commented Oct 5, 2017

jquery

@gnulnx

This comment has been minimized.

Show comment
Hide comment
@gnulnx

gnulnx Oct 10, 2017

jQuery 2.1.3 minified: 82.34 KB

Still smaller than all but vue.js. Dissing on JQuery is the new hot thing, but don't let that deter you. JQuery is still a fantastic tool that weights less than the other frontend frameworks.. It's by far the fastest and easiest to get going.

gnulnx commented Oct 10, 2017

jQuery 2.1.3 minified: 82.34 KB

Still smaller than all but vue.js. Dissing on JQuery is the new hot thing, but don't let that deter you. JQuery is still a fantastic tool that weights less than the other frontend frameworks.. It's by far the fastest and easiest to get going.

@threeaccents

This comment has been minimized.

Show comment
Hide comment
@threeaccents

threeaccents Oct 30, 2017

Adding Aurelia in there (http://aurelia.io/) could be a good idea.

Adding Aurelia in there (http://aurelia.io/) could be a good idea.

@ferdiemmen

This comment has been minimized.

Show comment
Hide comment
@ferdiemmen

ferdiemmen Nov 3, 2017

Thank you for this!

Thank you for this!

@ChaitanyaTeja150688

This comment has been minimized.

Show comment
Hide comment
@ChaitanyaTeja150688

ChaitanyaTeja150688 Nov 7, 2017

Can i get some angular 5 application bundle size

Can i get some angular 5 application bundle size

@dman777

This comment has been minimized.

Show comment
Hide comment
@dman777

dman777 Nov 7, 2017

Can you add Polymer 2.0?

dman777 commented Nov 7, 2017

Can you add Polymer 2.0?

@jfbrennan

This comment has been minimized.

Show comment
Hide comment
@jfbrennan

jfbrennan Nov 7, 2017

@gnulnx jQuery 3.2.2 is 30kb min+gz - smaller than React 16. If you do custom jQuery build with just the UI stuff (events, sizzle, etc.) it's just 19kb min+gz - smaller than Vue and Inferno. And to the haters, yes, jQuery vs. component-based libraries is not an apple-to-apples comparison.

@gnulnx jQuery 3.2.2 is 30kb min+gz - smaller than React 16. If you do custom jQuery build with just the UI stuff (events, sizzle, etc.) it's just 19kb min+gz - smaller than Vue and Inferno. And to the haters, yes, jQuery vs. component-based libraries is not an apple-to-apples comparison.

@jfbrennan

This comment has been minimized.

Show comment
Hide comment
@jfbrennan

jfbrennan Nov 7, 2017

Marko - not on cdnjs?
Riot: 24K Nov 7 15:48 riot.3.7.4.min.js, 10.3K gzipped
Mithril: 22K Nov 7 15:49 mithril.1.1.5min.js, 8.2K gzipped

Marko - not on cdnjs?
Riot: 24K Nov 7 15:48 riot.3.7.4.min.js, 10.3K gzipped
Mithril: 22K Nov 7 15:49 mithril.1.1.5min.js, 8.2K gzipped

@BradfordMedeiros

This comment has been minimized.

Show comment
Hide comment
@BradfordMedeiros

BradfordMedeiros Nov 30, 2017

@keyboardSmasher I think sizes matter a bit more than you give it credit for. The only use case isn't a standard website, which I generally think probably doesn't matter mostly. I got to this page because I'm was wondering whether or not using react was realistic for a html page on my esp8266 which has 64kib of instruction memory (which is how I'd have to embed the html).

@keyboardSmasher I think sizes matter a bit more than you give it credit for. The only use case isn't a standard website, which I generally think probably doesn't matter mostly. I got to this page because I'm was wondering whether or not using react was realistic for a html page on my esp8266 which has 64kib of instruction memory (which is how I'd have to embed the html).

@eavichay

This comment has been minimized.

Show comment
Hide comment
@eavichay

eavichay Dec 4, 2017

Polymer, Slim.js, Aurelia

eavichay commented Dec 4, 2017

Polymer, Slim.js, Aurelia

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Dec 27, 2017

Added React 16.2, they seem to get on a nice diet! 🍰

Owner

Restuta commented Dec 27, 2017

Added React 16.2, they seem to get on a nice diet! 🍰

@Restuta

This comment has been minimized.

Show comment
Hide comment
@Restuta

Restuta Dec 27, 2017

Added Aurelia 1.0.2

Owner

Restuta commented Dec 27, 2017

Added Aurelia 1.0.2

@orcwarrior

This comment has been minimized.

Show comment
Hide comment
@orcwarrior

orcwarrior Dec 28, 2017

@eavichay upon this comment, size of Polymer 2.0 vary from 10kb to 36kb depending on how much polyfills the browser needs.

@eavichay upon this comment, size of Polymer 2.0 vary from 10kb to 36kb depending on how much polyfills the browser needs.

@SamanthaAdrichem

This comment has been minimized.

Show comment
Hide comment
@SamanthaAdrichem

SamanthaAdrichem Jan 9, 2018

Is this the minimum size that's loaded? Is this a full size?

I wonder if you're using import and only import 'what you need' at the bare minimum to run a single page what the file sizes are then.

Is this the minimum size that's loaded? Is this a full size?

I wonder if you're using import and only import 'what you need' at the bare minimum to run a single page what the file sizes are then.

@ajspera

This comment has been minimized.

Show comment
Hide comment
@ajspera

ajspera Feb 2, 2018

Angular 5 numbers with ng cli version 1.6.7

Using the following flags

ng build --prod --build-optimizer --env=prod

bundle is 44k
polyfills are 16k (32k with ie 9-11 support)

ajspera commented Feb 2, 2018

Angular 5 numbers with ng cli version 1.6.7

Using the following flags

ng build --prod --build-optimizer --env=prod

bundle is 44k
polyfills are 16k (32k with ie 9-11 support)

@prigaux

This comment has been minimized.

Show comment
Hide comment
@prigaux

prigaux Feb 21, 2018

For information, evolution of AngularJS size:
angularjs-size-evolution-gzip

prigaux commented Feb 21, 2018

For information, evolution of AngularJS size:
angularjs-size-evolution-gzip

@panoply

This comment has been minimized.

Show comment
Hide comment
@panoply

panoply Feb 23, 2018

You should throw mithril.js on this list which comes in at < 8kb gzipped. Mithril is not a widely known framework but even still it has 8k+ stars, used by a lot of developers and it's considerably faster than Vue, React and Angular.

panoply commented Feb 23, 2018

You should throw mithril.js on this list which comes in at < 8kb gzipped. Mithril is not a widely known framework but even still it has 8k+ stars, used by a lot of developers and it's considerably faster than Vue, React and Angular.

@lastlink

This comment has been minimized.

Show comment
Hide comment
@lastlink

lastlink Mar 24, 2018

could you add preact w/ redux as well?

lastlink commented Mar 24, 2018

could you add preact w/ redux as well?

@Torah10

This comment has been minimized.

Show comment
Hide comment
@Torah10

Torah10 Apr 17, 2018

Thank you for this fundamental information. It is relative to my study and it may be helpful for my study purpose. Thanks for the efforts of sharing this article! I would like to share interesting information about the popular javascript frameworks: https://mlsdev.com/blog/63-5-best-javascript-frameworks

Torah10 commented Apr 17, 2018

Thank you for this fundamental information. It is relative to my study and it may be helpful for my study purpose. Thanks for the efforts of sharing this article! I would like to share interesting information about the popular javascript frameworks: https://mlsdev.com/blog/63-5-best-javascript-frameworks

@backspaces

This comment has been minimized.

Show comment
Hide comment
@backspaces

backspaces 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?

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

This comment has been minimized.

Show comment
Hide comment
@biwerr

biwerr 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

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

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