等待 JavaScript 中的动态导入答案

【问题标题】：Awaiting on dynamic imports in JavaScript等待 JavaScript 中的动态导入
【发布时间】：2019-03-21 06:28:06
【问题描述】：

在尝试移植我们的一些 JS 代码以使用模块时，我遇到了这个我无法解释的特殊情况。我正在设置我的主 JS 文件以对我的主入口点进行动态导入，然后它们又对它们需要的所有文件进行导入。设置如下：

index.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()

firstLevel1.js

(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()

firstLevel2.js

(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()

由于我正在导入的一些代码是遗留代码，我将 index.js 的脚本标签设置为 async="false" 以确保所有文件都以正确的顺序加载。在这个特定的示例中，我预计加载顺序是 index.js、firstLevel1.js、secondLevel1.js、secondLevel2.js、firstLevel2.js。 secondLevel3.js，最后是 secondLevel4.js。但是当我查看 chrome 中的加载顺序时，这就是我所看到的。

这对我来说是个问题，因为 JS 加载的顺序不是我想要正确设置旧文件的顺序。

为什么我看到的加载顺序与我预期的不同？有没有办法让它们同步加载？

【问题讨论】：

我想知道import() 的规范是否曾设想过这种用法...await import() 将等待文件被导入，规范中没有任何关于等待子模块的建议在要等待的模块内部，考虑到它们可能永远不会加载（因为它们是动态的），因此子（动态）模块不会产生任何影响
我的理解是，当我们执行await import() 时，我们实际上会等待文件被加载和解析，这意味着我们将运行文件中包含其他文件导入的所有全局代码。这意味着我们将同步加载所有文件。但看起来这不是await import() 所做的。你的建议对我有用，但我仍然不明白为什么这是必要的。
是的，但是动态导入中的动态导入不会等待......因为这没有意义，因为顶层不需要等待下一个级别导入（动态）因为并非所有动态导入都必须导入

标签： javascript es6-modules es6-module-loader dynamic-import

【解决方案1】：

这有点讨厌，但它的一种工作方式如下：

在firstLevel?.js 中，导出一个您将在index.js 中等待的异步函数

index.js

(async function () {
    await (await import('./firstLevel1.js')).default();
    await (await import('./firstLevel2.js')).default();
})();

firstLevel1.js

export default async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
};

firstLevel2.js

export default async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
};

它可能对您的实际需求没有那么有用，但它确实会按照您期望的顺序加载模块

【讨论】：

这行得通，但我仍然不明白为什么它是必要的。
因为动态导入系统不是为您的想法而设计的：p