Question

假设我有一个模块foo，如下所示：

export const f = x => x + 1;

export const g = x => x * 2;

我可以像这样使用这个模块：

import { f, g } from 'foo';

console.log(f(g(2)));

或者像这样：

import * as foo from 'foo';

console.log(foo.f(foo.g(2)));

我更喜欢第二种方式，因为它可以防止模块之间的名称冲突。

然而，import *效率会降低吗？它是否会阻止捆绑包（例如Rollup和Webpack）发现未使用的导入并将其删除？

Answer 1

当您将导入指定为import { f, g } from 'foo';时，您可以确保在编译速度和捆绑包大小方面获得更好的性能，因为您将只获得所需的依赖项。

注意：正如loganfsmyth指出的那样，一些最近的编译器/包能够引用实际上仅被使用的内容，这个IMO是一个额外的步骤，可能花费一些编译时间（尽管我没有时间来对此假设进行基准测试）

Answer 2

import *效率较低，因为您使用更多内存来拉取整个库，而不是仅仅实际需要的特定方法

Answer 3

Webpack至少（不确定Rollup）完全能够看到foo.f是对f导出名称的引用，所以你的两个例子的行为会相同。

Answer 4

对于大多数捆绑商而言，这并不重要，因为必须包含所有内容，因为

export const g = (() => {
    console.log("Side effects!");

    return x => x * 2;
})();