React-DOM — importing only render yields same bundle size as importing whole/default

Question

I've got a Webpack config that successfully enables tree-shaking. However, I find it incredibly frustrating that regardless if I import react-dom as a default export or only render — the only function I need — it's the size in the final bundle is the same according to Webpack-bundle-analyzer. A whopping 114kb. Webpack has a recommended bundle size of 244kb, so simply using React-DOM takes up nearly half of that space. Why is this? And is there any way around it?

import { render } from "react-dom";
// or
import ReactDOM from "react-dom";
// both give same 114kb output in final bundle :(

Answer 1

Tree shaking only works if some of the code is not utilised and can be safely removed. React-DOM unfortunately pretty much uses all of the code it exports, and there's a lot of it.

I would recommend looking in to Preact (https://preactjs.com/), an alternative implementation of React. The Preact core is 3kb and almost fully compatible with React, and for full compatibility the preact-compat addon is also available.

It's far smaller and faster, so it's a win-win.