如果默认为 text/javascript，脚本元素的 HTML “nomodule” 属性的用途是啥？

Posted 2023-02-22

【中文标题】如果默认为 text/javascript，脚本元素的 HTML “nomodule” 属性的用途是啥？

【英文标题】：What’s the purpose of the HTML “nomodule” attribute for script elements if the default is text/javascript?如果默认为 text/javascript，脚本元素的 HTML “nomodule” 属性的用途是什么？

【发布时间】：2018-02-07 04:03:47

【问题描述】：

我不清楚为什么在支持 ES6 模块的新浏览器中存在 nomodule 属性。

在 html 5 中，type 属性是可选的，defaults to text/javascript:

type 属性给出了脚本的语言或数据的格式。如果该属性存在，则其值必须是有效的 MIME 类型。不得指定 charset 参数。如果该属性不存在，则使用默认值是“text/javascript”。

它不默认为<script type="module" src="module.js"></script>。此默认设置是否已更改？如果不是，为什么需要nomodule？我可以只使用<script src="bundle.js"></script> 而不使用nomodule 吗？

【参考方案1】：

purpose of the nomodule attribute 是为了让支持module scripts 的新浏览器忽略特定的script 元素：

nomodule 属性是一个布尔属性，可防止脚本在支持模块脚本的用户代理中执行。

规范has a good example:

此示例展示了如何为现代用户代理包含一个模块脚本，以及为旧用户代理包含一个经典脚本：

<script type="module" src="app.js"></script>
<script nomodule src="classic-app-bundle.js"></script>

在支持模块脚本的现代用户代理中，具有nomodule 属性的script 元素将被忽略，而具有“module”类型的script 元素将被获取和评估（作为模块脚本）。相反，较旧的用户代理将忽略类型为“module”的script 元素，因为这对它们来说是未知的脚本类型——但它们在获取和评估另一个script 元素（作为经典脚本），因为它们没有实现 nomodule 属性。

这就是它的工作原理。

在 HTML 5 中，type 属性是可选的，默认为 text/javascript... 这个默认值是否已更改？

默认值没有改变——它仍然是text/javascript。但是type 属性现在也可以具有值module，这意味着浏览器仍然可以将其解析并执行为text/javascript——但也特别是module script。

如果没有，为什么需要nomodule？

这是为了防止支持模块脚本的新浏览器执行仅适用于不支持模块脚本的旧浏览器的脚本，如上例所示。

我可以只使用<script src="bundle.js"></script>而不使用nomodule吗？

是的，如果 bundle.js 不使用模块。如果它使用模块，你想把type=module放在它上面（在这种情况下，旧浏览器会忽略它，因为它们无法识别type的module值）。

【讨论】：

这是否意味着最好有 2 个脚本？一个用于新浏览器，一个用于旧浏览器？

@IrfandyJip 您在哪里使用新功能，是的。它可以帮助您针对较新的浏览器进行优化，因为它们不必处理大量仅用于与旧浏览器兼容的代码。 Angular 8 做到了这一点并将其称为“差异加载”。在我正在进行的一个项目中，它使我们能够将现代浏览器的代码大小减少近一半。

哪些浏览器（市场份额> 1%）会使用旧的（nomodule）方式？

【参考方案2】：

nomodule 属性

nomodule 属性是一个布尔属性，用于指示浏览器确实支持某个脚本标签不需要加载的模块。

nomodule 属性的目的是为不支持<script type="module"> 的旧浏览器提供一个备份脚本，因此将忽略它​​们。由于旧版浏览器既不支持 <script type="module"> 也不支持 nomodule 属性，可能会出现以下情况：

---

较新的浏览器，支持<script type="module"> & <script nomodule type="text/javascript">

浏览器可以加载并执行<script type="module">脚本 浏览器识别 nomodule 属性并且不加载<script nomodule type="text/javascript">。

---

旧版浏览器，不支持<script type="module"> & <script nomodule type="text/javascript">

浏览器将忽略<script type="module">，因为它的实现无法处理它。不会下载和执行任何脚本。 浏览器将忽略 nomodule 属性，并继续下载并执行 <script nomodule type="text/javascript"> 脚本。

【参考方案3】：

nomodule 属性

正如其他答案所述，此布尔属性设置为指示 该脚本不应在支持 ES2015 的浏览器中执行 模块——实际上，这可以用来提供后备脚本到 不支持模块化 JavaScript 代码的旧浏览器。

现在让我们通过一个例子来理解。

我正在使用 es6/ES2015 功能，需要包含 core.js 才能在 IE 浏览器中运行应用程序，其他主流浏览器如 chrome、firefox、safari 都支持 es6/ES2015 功能。您可以看到 IE 浏览器的总供应商大小为 150kb。

<script src="core.js"></script> // around 45kb after gzip
<script src="obserPoly.js></script> // around 5kb after gzip
<script src="vender.js></script> // around 100kb after gzip 

---

为什么要在其他浏览器中加载 core.js 和 obserpoly.js (45kb+5kb = 50kb)。我在我的脚本中使用了 nomodule 属性，它就像一个冠军。现在，Core.js 和 obserPoly.js 脚本仅在 IE 浏览器中加载。

<script nomodule src="core.js"></script> // around 45kb after gzip
<script nomodule src="obserPoly.js></script> // around 5kb after gzip
<script src="vender.js></script> // around 100kb after gzip