浏览器2020和其他浏览器中的javascript模块加载流程进行优化(仅在需要时下载)

Question

我使用vanilla javascript作为模块，并将它们直接加载到浏览器中，如下所示

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

显然，app.js也使用从其他文件导入的模块。我在浏览器最新的chrome & firefox开发工具(2020年3月)中看到的是获取所有嵌套模块的网络请求的瀑布。

一些模块在导入中被引用，但它们仅在用户执行特定操作时使用。

下载带有导入引用的所有模块是浏览器的标准规范吗?它会一直这样吗？我怀疑www规范总是在不断变化，我相信有更聪明的人在处理它，所以他们一定在我到达这一点之前就已经考虑并解决了这个问题。对吗？

有没有一种变通办法，让浏览器只在应用程序真正需要的时候获取模块，而不需要在第一次加载时提取大量模块？

我使用的是纯香草JS，没有任何捆绑，webpack，巴别塔等。

Answer 1

当然，确实有一个import() function，甚至不需要从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>

​