在 Typescript/ES6 中 import * vs import { specificName }？答案

【问题标题】：import * vs import { specificName } in Typescript/ES6?在 Typescript/ES6 中 import * vs import { specificName }？
【发布时间】：2017-02-24 22:35:22
【问题描述】：

声明

declare module "MyModule" {

export function Foo() {...}
export function Bar() {...}

}

我只是在某个地方需要 Foo，我应该如何导入它？

import * as MyModule from "MyModule";

MyModule.Foo();

或

import {Foo} from "MyModule";
Foo()

哪个比另一个更好？以第一种方式导入所有导出是否会对性能产生影响？

我在发布问题之前阅读的一些参考资料：

https://www.exratione.com/2015/12/es6-use-of-import-property-from-module-is-not-a-great-plan/

【问题讨论】：

如果您只需要Foo，为什么还要考虑* as MyModule？
stackoverflow.com/questions/147454/…
@SandeepRoy 我说的是javascript，这里不是混乱的命名空间。
@estus exratione.com/2015/12/…
对不起，我应该在评论之前检查一下。

标签： javascript typescript ecmascript-6 amd

【解决方案1】：

如果有人仍在寻找答案，我已经分享了我的想法。

假设您有一个 JSON 文件，并且想要将整个模块作为变量导入，然后使用 import *。
如果您有一个包含多个导出方法的模块（可以是第 3 方包），那么您应该使用 import {} 方法。
任何默认导出都应导入为“import any name”。

【讨论】：

【解决方案2】：

import {} from ... 语法使得对函数的存根和监视非常困难，通常需要额外的库，例如 rewire.js。需要注意的是，摇树也不起作用。我倾向于保持我的 util 模块很小，每个模块可能只包含 2-3 个函数。这样我就可以对我的模块使用import * as ... 语法，并在可能的情况下对第三方模块使用import {} ...。从而最大限度地减少摇树的需要。

【讨论】：

这篇博文提供了支持这个答案的附加信息：exratione.com/2015/12/…
我注意到 import * as Foo from ... 的行为与 import Foo from ... 的行为不同，其中存根适用于以后，但不是开玩笑。奇怪..

【解决方案3】：

如果您需要仅使用Foo，我认为最好只导入Foo。这使您的代码更清晰，因为通过查看该导入，您可以知道该代码正在使用 MyModule 的哪些元素。

它不会影响性能，因为无论哪种方式您都必须读取/下载整个文件。

此外，在使用 Rollup.js 之类的捆绑器时选择哪个选项并不重要——即使您从 MyModule 导入所有内容，该捆绑包也只会包含您在代码中实际使用的内容。

【讨论】：

我认为我们没有使用任何支持 treeshaking 的捆绑程序。

【解决方案4】：

只将必要导入您的代码当然是良好做法。假设有人编写了几千行代码来导入所有内容，然后您尝试对其进行分析。您是否认为您很容易知道代码中使用的哪些函数是导入的，哪些不是？显然这是可疑且不好的做法。

关于性能，我想影响不大。

【讨论】：