Could you explain what you mean with the Virtual DOM not being tree shakeable? Because these are two concepts I'm unable to connect.

Tree shaking is, like you described, the process of removing unnecessary and/or dead code. E.g. not bundling certain components and packages used only for debugging.

The Virtual DOM is just that. It's a virtual structure of the document that React creates upon first rendering, and keeps this in memory and uses it for e.g. diffing. But a Virtual DOM is not 'code'.

If you don't want to bundle every single component - that the end-user may or may not ever use - into a single .js file, we've had code-splitting, React.lazy and Suspense to help us for a while now.

Thanks.