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。我想知道的是，当一个文件中有多个导出时，是否需要为整个文件提供服务以完成导入语句，如果是这样的话，是否最好将每个声明保存在它自己的文件中以减少下载大小？

对于额外的荣誉，什么是处理通过网络导入的最佳实践，以及有哪些工具可以帮助简化这个过程？

Answer 1

这实际上取决于打包机。如果您的绑定器支持树抖动(就像Webpack 2+和卷起一样)，那么两者都会提供相同的输出。

设想1：

见这个例子。您会发现，由于树的抖动，Bar已经在最后一个包中被剥离了。但您必须记住，它只适用于ES6模块，而不适用于CommonJS模块。因此，请确保您正在导入此特性的ES6构建。Webpack和卷起对此的处理方式略有不同。

Webpack：它实际上是通过从结果包中删除module.exports来生成Bar死代码。当您在它上运行uglify时，这部分代码将被删除。所以在这里，您需要使用uglifier来删除未使用的代码。

汇总：当您将死代码传递给汇总时，它就会被移除。这就是为什么许多流行的图书馆已经转移到汇总捆绑。

设想2：

您已经得到了一个优化的输出。

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