React项目中不同文件重复导入同一依赖是否会增大构建体积？

核心结论 #

你实测没有发现构建体积上升是正常现象，多个组件重复导入同一个Modal组件不会导致构建体积变大。

• 目前所有主流前端构建工具（Webpack、Vite、Rollup等）都默认实现了模块去重机制，同一个模块无论被导入多少次，最终构建产物中只会保留一份该模块的代码。

最优导入方案 #

虽然重复导入不会有体积问题，但导入方式的选择还是会影响最终构建体积，推荐按照场景选择：

1. 稳妥的按需导入（全场景推荐） #

直接导入单个组件的入口文件，不需要依赖tree shaking就能实现最小体积引入，写法如下：

import Modal from 'react-bootstrap/Modal'

这种写法只会打包Modal组件本身和它的核心依赖，不会引入其他未使用的react-bootstrap组件，体积控制效果最好。

2. 解构全量导入（仅推荐tree shaking配置完善的项目） #

如果你的项目用的是react-bootstrap v2+版本，且生产构建已经开启了tree shaking和代码压缩，也可以用更简洁的解构导入写法：

import { Modal } from 'react-bootstrap'

新版本react-bootstrap本身是ESM格式，配合完善的tree shaking配置，这种写法最终的打包体积和按需导入完全一致。

常见误区提示 #

• 不需要为了避免重复导入额外封装全局公共Modal组件再分发使用，这种操作不会进一步减少体积，反而会增加不必要的组件层级。
• 不要混用两种导入方式导入同一个组件，比如一处用import { Modal } from 'react-bootstrap'，另一处用import Modal from 'react-bootstrap/Modal'，极端情况下可能会导致模块被重复打包。

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