Ожидание динамического импорта в JavaScript

Question

Пытаясь портировать часть нашего 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не то, что я хочу, чтобы правильно настроить мои устаревшие файлы.

Почему порядок загрузки, который я вижу, отличается от того, что я ожидал?Есть ли способ заставить их загружаться синхронно?

Answer 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');
};

это, вероятно, не будет таким полезным для ваших реальных требований, но оно загружаетмодули в том порядке, в котором вы ожидаете