使用 script 标签导入时防止 ESModule 被延迟

Question

我已经设置了差异加载来为较新的浏览器提供 ES6 模块。我遇到了一个问题，即使没有 defer 属性，默认情况下也会使用 script 标记延迟模块。IE

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

总是推迟到所有 HTML 都被解析并产生 FOUC 为止。

我试图阻止这种情况，并在加载 HTML 的其余部分之前强制解析文件，方法是使用

<script defer="false" type="module" src="..."></script>

<script defer="nodefer" type="module" src="..."></script>

<script async="false" type="module" src="..."></script>

这些方法似乎都不起作用。无论我使用什么技术，都必须保持 ES6 和 ES5 包之间的区别。如何防止 ESModules 被推迟到所有 HTML 都被解析之后，即使 ESModules 包含在 header 中？

Answer 1

正如这里所见，您无法禁用模块脚本的延迟：

\n\n

\n

默认情况下，模块脚本的行为类似于 defer \xe2\x80\x93，无法让模块脚本在获取时阻止 HTML 解析器。

\n

\n\n

但是，要在支持 ES6 模块并具有可用于备份的 ES5 模块的浏览器中加载 ES6 模块，您可以nomodule按照此处所述使用：

\n\n

\n

较旧的浏览器不会\xe2\x80\x99t 执行具有未知\xe2\x80\x9ctype\xe2\x80\x9d 的脚本，但您可以使用以下属性定义后备脚本nomodule：

\n\n

<script type="module" src="module.js"></script>\n<script nomodule src="fallback.js"></script>\n

\n

\n\n

如果您只是担心 FOUC，请隐藏您的内容，直到您准备好为止，或者确保必要的 CSS 内联在head.

\n