在使用 Create-React-App 时，我们应该导入整个库还是特定的单个组件？

Question

我问的是性能/优化问题。我意识到所有库（及其默认导出方法）都是不同的，但例如在react-bootstrap的文档介绍中它指出

您应该导入单个组件，例如：react-bootstrap/Button，而不是整个库。这样做只会引入您使用的特定组件，这可以显着减少您最终发送到客户端的代码量。

既然已经到了 2019 年，Create-React-App (CRA) 的构建是否会自动为我们优化，并且只导入那些至少使用过一次的组件？

如果是这样，这是否意味着我们可以忽略建议并导入整个库而不是特定组件？

Answer 1

以下是文档给出的两个示例：

import Button from 'react-bootstrap/Button';

这是推荐的导入方式。在这种情况下，您显式地从库中导入组件。

// or less ideally
import { Button } from 'react-bootstrap';

此方法导入整个库并将 Button 组件添加到该文件的范围。本案例使用 Webpack 的 tree shake 功能来减小包的大小，但这并不完全可靠。本文提供了有关为什么会出现这种情况的见解：https://advancedweb.hu/2017/02/07/treeshaking/