JavaScript-使用ES*模块优化下载时间

Question

我想知道使用ES2015模块时如何包括模块，以及如何优化模块以获得最佳下载体验。这个问题比较了代码组织的两种策略。

关于此问题留下的第一个评论，这是指两种情况与本机ES模块的比较，但是也欢迎与捆绑/缩减工具有关的答案。

方案1-单文件

foobar.js

export class Foo {
    constructor(message) {
        alert(message);
    }
}
export class Bar {
    constructor(message) {
        console.log(message);
    }
}

program.js

import { Foo } from "foobar.js";
class Program {
    constructor() {
        this.greeter = new Foo("hello world");
    }
}

方案2-多个文件

foo.js

export class Foo {
    constructor(message) {
        alert(message);
    }
}

bar.js

export class Bar {
    constructor(message) {
        console.log(message);
    }
}

program.js

import { Foo } from "foo.js";
class Program {
    constructor() {
        this.greeter = new Foo("hello world");
    }
}

在方案1中，Foo和Bar均以 foobar.js 声明，而在方案2中，它们在单独的文件中。 program.js 在任何一种情况下仅导入Foo。我想知道的是，当单个文件中有多个导出时，是否需要提供整个文件以实现导入语句，如果是这样，最好将每个声明保留在其自己的情况下文件以减少下载尺寸？

对于额外的敬意，在网络上处理进口的最佳实践是什么？

它实际上取决于捆绑器。如果您的Bundler支持树木摇动（例如WebPack 2 和汇总），则两者都会给出相同的输出。

方案1：

请参阅此示例。您会发现Bar由于树的颤抖而被剥离在最后的捆绑包中。但是，您必须记住，它仅适用于ES6模块，而不适用于CONCORJS模块。因此，请确保您正在为此功能导入ES6构建。WebPack和汇总处理此操作有一些差异。

webpack ：它实际上是通过从生成的捆绑包中删除模块来制作 Bar的死代码。当您在其上运行uglify时，该代码的一部分将被删除。因此，在这里您需要UGLifier来删除未使用的代码。

lollup ：通过汇总后立即将死亡代码删除。这就是为什么许多受欢迎的图书馆都转向捆绑的原因。

方案2：

您已经获得了优化的输出。

因此，在两种情况下，您都可以获得相同的优化结果，只要您的工具和设置正确。