场景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中，{em} foobar.js 中都声明了Foo和Bar，而在方案2中，它们位于不同的文件中。 program.js 在任一方案中仅导入Foo。我想知道的是，当单个文件中有多个导出时，是否需要提供整个文件才能完成import语句，如果是这种情况，最好是将每个声明保留在自己的文件中文件以减少下载大小？

有关额外的荣誉，通过网络处理导入的最佳做法是什么，以及有哪些工具可以帮助简化此过程？

Answer 1

它实际上取决于捆绑器。如果您的捆绑器支持Tree Shaking（如Webpack 2+和Rollup那样），那么两者都会提供相同的输出。

场景1：

见this example。你会发现Bar已经在最终的捆绑中被剥离了，因为树摇晃了。但是你必须记住它只适用于ES6模块而不适用于CommonJS模块。因此，请确保您要导入此功能的ES6版本。 Webpack和Rollup处理这个问题的方式略有不同。

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

汇总：在您通过Rollup传递死代码后立即将其删除。这就是为什么许多流行的图书馆已经转向Rollup进行捆绑的原因。

场景2：

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

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

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

场景1 - 单个文件

场景2 - 多个文件

1 个答案:

场景1：

场景2：