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

Question

我问的是性能/优化问题。我意识到所有库(及其默认导出方法)都是不同的，但例如在 react-bootstrap 的 doc intro 上它指出

You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.

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

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

Answer 1

下面是文档给出的两个例子:

import Button from 'react-bootstrap/Button';

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

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

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