React组件导入优化：两种写法孰优孰劣？当前用法是否正确？

——我想探讨导入优化相关内容。

以下是两种组件导入方式：

第一种写法 #

import { Accordion, Button, Modal } from 'react-bootstrap';

第二种写法 #

import Accordion from 'react-bootstrap/Accordion';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

问题 #

从优化角度看哪种更好？还是两者效果相同？我目前正在使用第一种写法，这种用法是否正确？

解答 #

首先，第一种写法是完全正确的，它符合ES模块的导入规范，react-bootstrap官方也支持这种导入方式。

从优化角度看，两者的区别主要体现在打包体积和工具链支持上：

• 打包体积差异：第二种写法通常更有利于控制打包体积。因为react-bootstrap的根导出文件（react-bootstrap）包含所有组件的导出逻辑，如果你的打包工具没开启Tree Shaking，或者该库的根导出是CommonJS格式（旧版本常见），第一种写法会把整个库的冗余代码也打包进来；而第二种写法直接导入单个组件的独立文件，只会打包你实际用到的组件代码，能有效减少最终产物大小。
• Tree Shaking的作用：如果你的项目配置了完善的Tree Shaking（比如用Webpack 4+、Rollup，且使用的react-bootstrap版本提供ES模块格式），第一种写法也能达到和第二种相近的优化效果，打包工具会自动剔除未使用的代码。但如果Tree Shaking未配置或不生效，第一种写法的劣势就会显现。
• 开发体验权衡：第一种写法更简洁，导入多个组件时代码更紧凑；第二种写法虽然繁琐，但组件来源更明确，在复杂项目中可读性更强。

总结 #

• 若追求极致打包体积，且不确定Tree Shaking是否能正常工作，优先选第二种写法；
• 若项目Tree Shaking配置完善，且看重开发效率，第一种写法既正确又便捷，完全可以放心使用。

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