在lib中导入{module}和在Javascript中从lib /模块导入模块的区别

Question

我正在尝试优化我的供应商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';

这将导入在材料-ui中使用默认导出的任何内容作为导入中定义的卡 。

import { Card } from 'material-ui';

这将从material-ui导入指定的导出卡 （假设卡存在）。

有关更多信息，请参阅以下堆栈溢出帖子。

我什么时候应该使用花括号进行ES6导入？

Answer 2

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

进口

import { Card } from 'material-ui';

对应于从根导入名为Card的导出成员。 查看源代码 ，我们看到它看起来像这样：

export Card from './Card';

从./Card （ material-ui/Card ）导入默认导出 。

第二次进口

import Card from 'material-ui/Card'

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

因此，它们是一样的。

Answer 3

主要区别在于编译后的代码。 为了提高性能，第一个选择：

import Card from 'material-ui/Card'

是最好的，因为它直接进入您要求的模块。

在第二个选项中：

export Card from './Card'

Babel使用transform-export-extension插件编译代码，因此编译的代码比第一个选项大。