javascript поток загрузки модуля в браузерах 2020 и в любом случае для оптимизации (загрузка только при необходимости)

Question

Я использую vanilla javascript в качестве модулей и непосредственно загружаю их в браузер, как это

<script type="module" src="app.js"></script>

, очевидно, приложение. js также использует импортированные модули из других файлов. В браузере [последний (март 2020 г.) chrome & firefox] dev tools я вижу, что это водопад сетевых запросов на выборку всех вложенных модулей.

Некоторые из модулей упоминаются в импорте, но они используется только тогда, когда пользователь выполняет указанное c действие.

Загружает ли все модули со ссылкой на импорт стандартную спецификацию c браузерами, и это будет продолжаться? Я подозреваю, что www specs постоянно развиваются, и я уверен, что есть более умные люди, которые обращаются с этим, поэтому они, должно быть, подумали и решили эту проблему еще до того, как я достиг этой точки. верно?

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

Я использую чистую vanilla JS без каких-либо упаковщиков, webpack, babel et c.

Answer 1

Конечно, есть import() функция , и ее даже не нужно вызывать из module скрипта.

const script_url = URL.createObjectURL(new Blob([
  `export const foo = "hello, world";`
], { type: 'application/javascript' }));

document.getElementById('btn').onclick = async(evt) => {
  const mymodule = await import(script_url);
  console.log(mymodule.foo);
};

<button id="btn">fetch my module</button>