React：在组件和库方式中导入组件是什么感觉？

Question

我听说有两种不同的导入组件/模块的方法。

1. 组件方式
2. 图书馆方式

  

有人对这些概念有所了解吗？

Answer 1

看看root index of material-ui。如果从此索引导入内容，则会加载导出的所有内容，在这种情况下最终会成为整个库。如果你没有惊天动地，你的软件包将包括库导出的所有内容及其所有依赖项（无论你是否使用它们）。

最好从组件索引导入（参见Button/index.js），因为您可以将库的消耗保持在最低限度：

import Button from ‘material-ui/Button’;

此问题在lodash中出现很多，并且在mui文档中有所介绍：Minimizing Bundle Size

Answer 2

我找到了解决问题的方法。以下是我正在寻找的

库导入方式

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

这很方便，但它不仅捆绑了Button和FlatButton（及其依赖项），而且捆绑了整个库。

组件导入方式

减轻它的一种方法是尝试仅导入或要求所需的内容，可以说是组件方式。使用相同的示例：

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

这将仅捆绑Button，FlatButton及其各自的依赖项。但不是整个图书馆。因此，我将尝试摆脱所有库导入，而改用组件方式。

如果您不使用大量组件，那么它将大大减少捆绑文件的大小。