大括号导入和从ES6中的子目录导入有什么不同？

Question

我对这些进口产品很感兴趣。

import Button from "react-bootstrap/lib/Button";
import { Button } from "react-bootstrap";

他们都非常好地加载按钮，但是对于捆绑的最终大小是否重要？

Answer 1

是的，实际上，在这个特定情况下的最终包大小确实很重要。根据{{​​3}}：

  

捆绑包大小优化

     

如果使用 npm 安装React-Bootstrap，则可以从react-bootstrap/lib而不是整个库导入单个组件。这样做仅提取您使用的特定组件，这可以显着减少客户端软件包的大小。

重点是我的。以上内容确认从react-bootstrap/lib子目录中的特定文件导入会减少捆绑包大小，因为捆绑包不会包含整个库，如果您直接从具有import { Button } from 'react-bootstrap'的库导入，则会发生这种情况。

另外需要注意的是，像Webpack这样的捆绑包确实具有React Bootstrap Documentation等功能，可以在仅导入库的某个部分时删除不必要的模块，但是它在使用React Bootstrap 时无法正常工作，所以更喜欢捆绑尺寸优化的第一选择。对于其他库的其他情况，它取决于是否可以可靠地使用树摇动，在这种情况下，导入库的组件的方式无关紧要。