3 ms·

Note that this is the full package, and that it's normal to use a bundler that will treeshake things you don't use away. For example react-dom includes server-s

Note that this is the full package, and that it's normal to use a bundler that will treeshake things you don't use away. For example react-dom includes server-side rendering functions that are not necessary on browser side.

ttfkam 2y ago
So how small can you get for a hello world page with a single "hello $name" component, spending an hour or less on it?
- acemarke 2y ago
  That bundle size + the size of your component. Just created a fresh Vite+React app and rendered a "hello world" component, and the resulting output is: dist/assets/index-uoOveHrm.js 142.66 kB │ gzip: 45.76 kB
acemarke 2y ago
Afraid that's not accurate. The package size I linked is specifically the `react-dom.production.min.js` bundle that is used on the client side. The `react-dom` package does include _separate_ bundles used for server rendering, but that whole React client bundle will get included in your app, and it does _not_ tree-shake at all. (To be clear I _like_ React, but it's best to be accurate about what happens here.)
- throwAGIway 2y ago
  So this package is not the actual react-dom package I get when I npm install react-dom? Thanks for the correction!
  - acemarke 2y ago
    The `react-dom` NPM package includes multiple different JS bundles that are used for different purposes. See that `unpkg` link I pasted in the parent comment. There's 3 different flavors of `react-dom` for use in the client (dev, prod, profiling), and then several variations of `react-dom` for use _on the server_. The client bundles don't include any of the server functionality. _None_ of the bundles are treeshakeable at all, because A) they're shipped as CommonJS modules and not ESM, and B) the way the React library is written and architectured as a whole. All of the reconciler logic is intertwined and unshakeable, so even if React did suddenly switch to shipping ESM modules instead of CJS, it would still end up as the exact same bundle size.

ttfkam 2y ago

So how small can you get for a hello world page with a single "hello $name" component, spending an hour or less on it?

acemarke 2y ago
That bundle size + the size of your component. Just created a fresh Vite+React app and rendered a "hello world" component, and the resulting output is: dist/assets/index-uoOveHrm.js 142.66 kB │ gzip: 45.76 kB

acemarke 2y ago

Afraid that's not accurate. The package size I linked is specifically the `react-dom.production.min.js` bundle that is used on the client side. The `react-dom` package does include _separate_ bundles used for server rendering, but that whole React client bundle will get included in your app, and it does _not_ tree-shake at all. (To be clear I _like_ React, but it's best to be accurate about what happens here.)

throwAGIway 2y ago
So this package is not the actual react-dom package I get when I npm install react-dom? Thanks for the correction!
- acemarke 2y ago
  The `react-dom` NPM package includes multiple different JS bundles that are used for different purposes. See that `unpkg` link I pasted in the parent comment. There's 3 different flavors of `react-dom` for use in the client (dev, prod, profiling), and then several variations of `react-dom` for use _on the server_. The client bundles don't include any of the server functionality. _None_ of the bundles are treeshakeable at all, because A) they're shipped as CommonJS modules and not ESM, and B) the way the React library is written and architectured as a whole. All of the reconciler logic is intertwined and unshakeable, so even if React did suddenly switch to shipping ESM modules instead of CJS, it would still end up as the exact same bundle size.