Why is React file size so large given its small API?

Question

Here are the numbers

• min + gzip 26k
• gzip 90k
• original 450 + k

And React does not contain many features in the documentation. Why is he so big?

I have the feeling that this is an implementation of the lightweight DOM. But I want to be sure.

Answer 1

The reaction goes quite a bit! The biggest non-obvious part of React is probably the event system — not only does React implement its own event dispatch and bubble, it normalizes common events in browsers, so you don’t have to worry about that. For example, SelectEventPlugin is a built-in "plugin" event that provides an onSelect event that behaves the same in all browsers.

Implementing a "virtual DOM" also requires a decent amount of code; It takes a lot of effort to optimize performance, so ReactPerf, which is a tool for measuring rendering performance, is included in the uninvited version. When updating the DOM, React also does some convenient things for you, such as maintaining any input selection and maintaining the current scroll position.

The reaction also has several other tricks up its sleeve. One of the coolest is that it fully supports rendering the component into an HTML string, even if you don’t have a browser environment, so you can submit a page that works even before JS loads.

---

What are you comparing React to? response-15.0.2.min.js is 43k (gzipped), but jQuery is 33k, while ember-2.6.0.prod.js is 363k (also gzipped). Obviously, these structures do not do exactly the same thing, but they have a lot of overlaps, so I think the comparison is reasonable.

If you are worried about the size of the download, I would not worry too much that the JS code contributes to this. Here's the ad that I see on the right side of my page right now:

Its download size is 95 thousand - I would not think twice about including such an image on the page, because (even if I was worried about performance), there are usually so many other performance problems to fix which are more profitable.

---

In short, I don’t think React is so big, and how big it really is, because of the many small things that it does to help you. You cite the React small API as the reason that React code should be small, but the best question might be: "How can the React API be so simple given everything it does for you?"

... but this is a completely separate question. :) I hope I answered your question - I am glad to expand if I did not.

Answer 2

A few thoughts. I had some of the same problems with this size, but after using it, without jokes, I would use it if it was 5 MB in size. This is just fine. However, I decided to reduce as many dependencies on other libraries as possible. I used jquery for two things: ajax and ajax automatic response and request processing (beforeSend, etc.) that will process when the token was in the response after logging in, and then make sure each ajax request adds it to the header authorization before sending. I replaced this with a super small simple bit of my own javascript. It works great. Also, I tried to use _underscore. I replaced it with lodash, which is smaller and faster, although I currently do not use it, so it can completely remove it.

Here is one article out of many on google that I found to have some alternatives using inline JS on top of jquery.

http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/