Reduce React load time by 3-7ms in Node

[zertosh]

The creation of the DOM factories with mapObject is a relatively expensive operation in Node. It's accounting for ~10% of the require load time across the various builds. I saw some improvements from only unwrapping createDOMFactory, but the bulk of the gains are from removing mapObject.

I ran a few benchmarks that only focused on load times using [email protected] and [email protected] (source). Each test was run 100 times:

engine	build	before: avg / p90 (ms)	after: avg / p90 (ms)
node	react.js (development)	29.14 / 30	22.07 / 23
node	react.js (production)	23.30 / 24	19.99 / 21
node	dist/react-with-addons.js	29.61 / 30	25.95 / 27
node	dist/react-with-addons.min.js	20.06 / 21	17.55 / 18
node	dist/react.js	21.83 / 22	17.91 / 18
node	dist/react.min.js	15.08 / 15	12.33 / 13
jsc	dist/react-with-addons.js	8.48 / 9	8.35 / 9
jsc	dist/react-with-addons.min.js	6.04 / 6	5.93 / 6
jsc	dist/react.js	5.75 / 6	5.46 / 6
jsc	dist/react.min.js	4.07 / 4	3.96 / 4

This change also reduced the gziped size of the bundles:

   raw     gz Compared to master @ cba2b19b84b339e937b4bbc258cd09b2b8303391
     =      = build/react-dom-fiber.js
     =      = build/react-dom-fiber.min.js
     =      = build/react-dom-server.js
     =      = build/react-dom-server.min.js
     =      = build/react-dom.js
     =      = build/react-dom.min.js
  +746   -222 build/react-with-addons.js
  +159    -53 build/react-with-addons.min.js
  +746   -244 build/react.js
  +159    -29 build/react.min.js

Raw size can also be reduced by renaming createDOMFactory to something shorter.

This change is GCC safe (see discussion in #5759).

I'm also investigating adding a babel transform to inline the result of keyMirror and keyOf.

[vjeux]

This is insane to me that this takes ~10% of the startup time! cc @gaearon and @spicyj for accepting.

[sophiebits]

Works for me, thanks!

[vjeux]

Nuclide is not even using React.DOM :( https://fburl.com/407417521

[vjeux]

If you remove mapObject from this test, you can also kill the entire module from React codebase fyi:

react/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js

Line 166 in 484f96b

return mapObject(statusDisplays, function(statusDisplay, key) {

[zertosh]

Thanks! @vjeux we do use React.DOM but it's called ReactDOM since we get it through react-for-atom https://github.com/jgebhardt/react-for-atom/blob/746b715/react-for-atom.js#L22

EDIT: I misread as react-dom. Nuclide does not use React.DOM, we already write jsx.

[bolinfest]

Would we be willing to use memoizing lazy getters instead? I suspect very few of these tags are used, in practice.

[zertosh]

I just ran a quick unscientific test, and it takes ~0.63ms to create ReactDOMFactories (since you're calling 130 functions, plus whatever work that does). However, if you make them getters, so that it looks like this:

var ReactDOMFactories = {
  get a() { return createDOMFactory('a'); },
  get abbr() { return createDOMFactory('abbr'); },
 //...
};

It takes ~0.13ms to create that object. I'm not sure if ~0.5ms is worth it.

[zpao]

Yea not worth it. We're 100% more likely to do #6169 and split these off from React entirely.

[cpojer]

Awesome work.