reactjs - 这两种 Material-UI 导入方式有区别吗？

Question

在使用material-ui时，我一直在关注文档并使用下面的方法导入

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

然而，我最近遇到了一些代码，上面的代码将被导入为

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

第二种导入方法显然看起来更简洁，那么您在网上找到的文档和大多数代码都以第一种方式导入它有什么原因吗？

Answer 1

material-ui 是一个包含很多组件的库。在第一种情况下，您只导入了项目中需要的那些组件:

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

---

第二种情况

从'@material-ui/core'导入{Dialog, DialogTitle, DialogContent};

您已经导入了所有组件，甚至是您不需要的组件。如果你的模块打包器没有 tree shaking 功能，这可能会大大增加带有未使用死代码的包的大小。

我建议你使用 import {...} from '@material-ui/core' 只有当你知道你的模块打包器有 tree shaking 并且你打开了这个功能时。或者，如果您使用 @material-ui/core 中的几乎所有组件，您也可以使用这种情况。

您可以在 webpack 中对 tree shaking 使用react here