如何降低React中createPortal的导入成本？尝试react-dom/client导入失败

• 明确子模块导入限制
  react-dom/client仅包含客户端根渲染相关API（比如createRoot），createPortal并不在这个子模块中，所以无法从该路径导入。

• 从react-dom/server导入（服务端渲染场景）
  若你的项目涉及服务端渲染，可以直接从react-dom/server导入createPortal，这个入口的体积远小于主react-dom包，因为它只包含服务端渲染所需的核心逻辑，不包含客户端 hydration 等冗余代码。

• 开启tree shaking优化
  确保你的构建工具（Webpack、Vite等）开启了tree shaking功能，且使用ES模块格式的React依赖。React 18+对模块拆分做了针对性优化，正确配置后会自动剔除未使用的代码，大幅压缩最终打包体积。

• 坚持按需导入
  避免全量导入react-dom（如import * as ReactDOM from 'react-dom'），始终使用按需导入：import { createPortal } from 'react-dom'，这样构建工具才能精准识别并剔除无用代码。

• 排查重复依赖问题
  使用构建分析工具（如webpack-bundle-analyzer）检查打包后的依赖树，确认是否存在多版本react-dom被重复打包，或其他依赖间接引入完整react-dom的情况，这类问题会额外增加体积，需及时清理。

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