javascript - Import { module } from lib 和 import module from lib/module 在 Javascript 中的区别

Question

我正在尝试优化我的 vendor bundle.js，因为它已经膨胀并且我正在使用 material-ui 库。

import Card from 'material-ui'; // Very bad as this will import everything

有人能告诉我这两个 import 语句在导入到您的应用程序中的 js 代码的大小方面有什么区别，或者它们是否相同。

import { Card } from 'material-ui';
import Card from 'material-ui/Card'

Answer 1

在这种情况下，它们是相同的。

导入

import { Card } from 'material-ui';

对应于从根导入名为Card 的导出成员。看着 source code ，我们看到它看起来像这样:

export Card from './Card';

它导入了 default export来自 ./Card(即 material-ui/Card)。

第二次导入

import Card from 'material-ui/Card'

从 material-ui/Card 导入默认导出，我们刚刚展示的正是第一个导入所做的。

因此，它们是相同的。