为什么命名导入会导致更慢的构建和更大的输出

Why do named imports cause slower builds and larger output?

本文关键字：构建 输出 导入 为什么      更新时间：2023-09-26

我正在看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.

这还不足以让我们看到发生了什么。这是两件独立的事情。

  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如果他们都谈论相同的文件,在同一个文件夹。

相关文章：