时间戳

首页 > 解决方案 > 与 Create-React-App 一起使用时，我们应该导入整个库还是特定的单个组件？

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

问题描述

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

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

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

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

标签： javascriptreactjsreact-nativedeploymentcreate-react-app

解决方案

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

import Button from 'react-bootstrap/Button';

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

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

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

推荐阅读