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

通过这种方式，您可以导入整个程序包：

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

但是，您可以根据需要导入单个组件：

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

如果您使用VSCode，则可以使用Import Cost扩展名检查导入大小。

重要的是要提到，有用于按需导入组件的插件，例如babel-plugin-import，这样您就可以在场景下导入单个组件。

Answer 2

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';

您已经导入了所有组件，甚至不需要的组件。如果您的模块捆绑器没有树状摇动功能，这可能会大大增加带有未使用死代码的捆绑包的大小。

仅当您知道模块捆绑器已摇晃树并且您已开启此功能时，才建议您使用import {...} from '@material-ui/core'。或者，如果您使用@material-ui/core中的几乎所有组件，也可以使用这种情况。

您可以对webpack here中的摇树做出反应

Answer 3

在第一种情况下，捆绑包中仅包含3个组件，因为您导入了3个文件。在第二种情况下-您将核心库打包导入，并仅使用其中的三个组件。但是捆绑软件制造商应删除未使用的组件，因此您应使用https://www.npmjs.com/package/webpack-bundle-analyzer之类的工具检查捆绑软件，以查看是否导入未使用的代码。

这两种Material-UI导入方法之间有区别吗？

3 个答案: