javascript - ES6 中花括号导入和从子目录导入有什么区别？

Question

我对这些导入很好奇。

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

它们都能很好地加载按钮，但这对 bundle 的最终大小有影响吗？

Answer 1

是的，事实上，在这种特定情况下，最终的 bundle 大小确实很重要。根据 React Bootstrap Documentation :

Bundle size optimization

If you install React-Bootstrap using npm, you can import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the size of your client bundle.

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

另一件需要注意的事情是，像 Webpack 这样的打包器确实有像 tree-shaking 这样的特性。在仅导入库的特定部分但它不能可靠地与 React Bootstrap 一起工作时删除不必要的模块 yet，因此首选 bundle 大小优化的首选。至于其他库的其他情况，这取决于是否可以可靠地使用 tree-shaking，在这种情况下，以何种方式导入库的组件并不重要。