ReactDOM is huge! Any way to shrink it?

I finally used the awesome bundle-visualizer and discovered that ReactDOM is quite large at 190 KB.

Is there any way to shrink it?

I know it’s a noob question and the answer is likely that it can’t be shrunk because it’s everything that makes React work. But I still find it insane.

Maybe Preact, or even the new React Fiber? Or perhaps there’s a React that utilizes webcomponents? That might reduce bundle size if they’re opting to use browser features where available. Polymer has been able to reduce the library size quite drastically due to dynamically using default webcomponents where browsers support it.

React’s bundle size is a known problem afaik, and one that cannot be resolved as far as I’ve read on github. Correct me if I’m wrong.

Based on this post on the Meteor blog, would it help at all to only import the createElement or Component pieces of React?

So instead of import React from 'react';, you do import createElement from react/lib/createElement;?

The post states that import { Foo } from 'react-bootstrap'; imports everything which is much larger than the specific import Foo from 'react-bootstrap/lib/Foo';. While we are not using the syntax of the first, we are clearly importing everything when we import React. So the same idea might be applicable here

1 Like

@merlinpatt you can’t compare react-bootstrap to react. react-bootstrap is a set of ui-elements that you can cherry pick. You can’t cherry pick parts of react.

You may want to suck on it :D.

Why not? If you only ever use createElement and not the Component class, why not only import createElement?

because it will probably import anything anyway. It’s a runtime. If it would need not anything, i would assume that the react team had already optimized it :wink:

but you can try and share your results