为什么导出/导入默认 ES 模块属性比命名模块属性更快？答案

【问题标题】：Why is exporting/importing default ES module properties faster than names module properties?为什么导出/导入默认 ES 模块属性比命名模块属性更快？
【发布时间】：2018-07-04 02:30:53
【问题描述】：

我正在阅读 Material UI 文档，它指出：

请注意，在上面的示例中，我们使用了： import RaisedButton from 'material-ui/RaisedButton'; 而不是 import {RaisedButton} from 'material-ui'; 这将使您的构建处理速度更快，构建输出更小。

我找不到任何理由说明为什么使用默认导出会使构建过程更快或构建输出更小。

我的经理要求我们不要使用默认导出，但是较小的构建大小是该项目的重要目标。我提到了 Material UI 的这句话，他们说要找到证据。我想要一些证据，因为我用 Babel 编译它的尝试表明 default 更大。

【问题讨论】：

标签： javascript reactjs typescript ecmascript-6 material-ui

【解决方案1】：

关键不在于模块是否有默认导出，而是导入一个包含所有 Material UI 组件（material-ui 模块）的模块而不是仅包含 @987654322 的模块这一事实@ 组件（material-ui/RaisedButton 模块）。

绝对清楚：我们应该使用仅包含单个组件的模块，即material-ui/RaisedButton。

【讨论】：

没错。我相信 material-ui 文档还说，如果您启用了 tree-shaking，那么您使用哪个导入都没有关系。
哇，我很笨。它不强调花括号；它强调文件路径。谢谢！
部分正确，@Sidney。摇树时它不会影响生产包的大小。然而，在开发过程中，我们仍然会从解析和执行所有 JavaScript 中受到影响。
@Sidney 无论您是否启用了 tree-shaking，总是更喜欢单个组件导入而不是等效的命名导入，这绝对有好处，因为它减少了编译时间我>。 “编译”是指转译/捆绑/摇树/缩小。因此，即使运行时代码的结果最终相同，您仍然有更快的编译时间。
@Bergi 我认为这是不言而喻的......我对语法只字未提。