Vite构建React项目：无法Tree-shake react-dom-client的createRoot致体积900kb+

核心结论：你的代码不存在Tree-shaking问题，开发环境下的大体积是正常现象 #

1. 开发环境的特性决定了体积偏大
   Vite在开发模式下为了保障热更新速度、保留完整调试信息，不会执行Tree-shaking或代码压缩逻辑。react-dom_client.js加载的是React DOM的完整开发版源码，包含所有调试断言、警告逻辑和未压缩的原生代码，900kb+的体积是开发环境下的正常表现，和你是否精准导入无关。

2. 你的导入方式已经是最优写法
   你使用的import {createRoot} from 'react-dom/client'是React 18官方推荐的精准导入方式，这种写法在生产构建阶段会被Vite自动执行Tree-shaking，仅打包你实际用到的createRoot相关代码，不会引入整个react-dom库的冗余内容。

3. 生产构建后的体积才是参考标准
   执行npm run build完成生产构建后，Vite会对代码做Tree-shaking、混淆、压缩等优化，此时react-dom相关的打包产物会大幅缩小，通常会降到几十kb的级别（符合前端生产环境的常规体积范围）。你可以通过npm run preview启动预览服务，在Network面板中查看生产构建后的实际加载体积，这才是终端用户会接触到的资源大小。

内容的提问来源于stack exchange，提问作者SKB_BGPL