这两种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';

在第二种情况下

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

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

import {...} from '@material-ui/core'我建议您仅在知道您的模块捆绑器具有树摇动功能并且打开了此功能时才使用。或者，如果您使用@material-ui/core.

你可以在这里对 webpack 中的 tree shake 做出反应