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及其各自的依赖项。但不是整个图书馆。所以我会试图摆脱你所有的库导入并改用组件方式。

如果您没有使用大量组件，那么它应该大大减少捆绑文件的大小。