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

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

这并没有足够的背景来了解正在发生的事情。有两件不同的事情正在发生。

1. 默认导出通常会大于房地产导出。

   export default ObjectWithAllKindsOfStuff {}
   export function someFunction () { }
   

   如果第二个文件位于同一个文件中，则几乎 100% 的情况下，第二个文件会更小。

2. 从 @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 无关，如果它们是两者都在谈论同一个子文件夹中的同一个文件。