Question

我查看了material-ui文档，并看到了以下关于如何在ES6中正确导入的评论。

执行命名导入的速度较慢并导致输出较大的技术原因是什么？

Notice that in the above example, we used:

import RaisedButton from 'material-ui/RaisedButton';

instead of

import {RaisedButton} from 'material-ui';

This will make your build process faster and your build output smaller. For a complete mapping of Material-UI components to import, see /index.js inside the Material-UI npm package root directory.

Answer 1

这还不足以看出发生了什么。有两个单独的事情发生。

默认出口通常会大于物业出口。
```
export default ObjectWithAllKindsOfStuff {}
export function someFunction () { }
```
如果它们在同一个文件中，第二个会变小，几乎100％的时间。
从@angular/core导入单个函数需要打开更多文件（花费更长时间），而不是从@angular/a/b/c/d/e/f.js导入所有内容。
如果您位于根文件夹的index.js和export * from './a'，并且在那里，您export * from './b'，等等......那么对于WebPack或Rollup等等，它必须加载所有文件夹下面的文件，以确定每个文件导出的内容，以便它可以告诉函数实际存在的位置。

他们的示例实际上是不公平的，因为使用import { x } from 'package/SubPackage/SubSubPackage';将会比import All from 'package/SubPackage/SubSubPackage';更小，但是如果你import { x } from 'pacakge';并且它必须一直遍历每个文件夹，通过所有出口，找出函数来自哪个文件，这是他们真正做的比较 - 它与export {property} from与export Namespace from无关，如果它们都是在同一个子文件夹中谈论同一个文件。

为什么命名导入会导致构建速度变慢和输出更大？

1 个答案: