Question

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

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

总是推迟到所有HTML都解析为导致FOUC为止。

我试图防止这种情况，并在使用HTML加载其余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都解析后，即使包含在头部中也是如此？

Answer 1

如here所示，您不能在模块脚本上禁用延迟：

默认情况下，模块脚本的行为类似于defer –无法使模块脚本在提取时阻止HTML解析器。

但是，要在支持它的浏览器中加载ES6模块并提供可备份的ES5模块，可以将nomodule用作described here：

较旧的浏览器不会执行具有未知“类型”的脚本，但是您可以使用nomodule属性定义后备脚本：
<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

如果您只是担心FOUC，请隐藏您的内容，直到准备就绪或确保在head中插入必要的CSS。

防止在使用脚本标签导入时延迟ESModules

1 个答案: