通过 <script src=""> 加载 JavaScript ES6 模块并在 <script> 标记中导入所有导出是否相同？

Question

看不懂the Deno manual section on the deno bundle command末尾的两个例子有什么区别：

捆绑包也可以在网络浏览器中加载。捆绑包是一个 自包含 ES 模块，因此 type 的属性必须设置为 “模块”。例如：

<script type="module" src="website.bundle.js"></script>

或者你可以将它导入另一个 ES 模块来使用：

<script type="module">
  import * as website from "website.bundle.js";
</script>

我的印象是两种形式都达到了相同的效果（即“fetched and executed immediately, before the browser continues to parse the page”），而后者用于脚本跟随或想要缩小导入的范围（例如，在this answer 中看到）。

• Section 16.6.1.2 Modules of the Exploring ES6 book 似乎同意这一评估。

• Reddit 线程 Difference Es6 import module vs script src="" 似乎也证实了这一点：“与其将整个库转储到您的全局范围内，不如只包含您需要和实际使用的内容。”

---

这可能被认为是其他问题的重复（请参阅列表底部），但这些答案对我没有多大帮助，而且辅助来源似乎也没有揭示我的假设是否正确。 （另一方面，我很可能忽略了一些明显的事情，并且必须提高我的阅读理解能力......）

• Load javascript as an ES6 module OR via a script tag in the page（切线相关）
• What is the difference between a script tag with src and a script tag that requires a module?（看起来很有希望，但与 ES6 模块无关……）
• Classic scripts v/s module scripts in Javascript
• WHATWG: Adding JavaScript modules to the web platform
• Import js from script tag in HTML file. Possible?
• What is the difference between importing js library or reference it in html <script> tag（与 ES6 模块无关）
• Should I reference files in a `script` tag when using ES6 modules in a browser
• ES6 import vs <script src> in html

Answer 1

我的印象是两种形式都达到了相同的效果

是的，两者的效果是一样的

（即“在浏览器继续之前立即获取并执行 解析页面"),

不，任何<script 和type="module" 默认都是defer，所以加载不会阻塞解析。然后，所有延迟的脚本都按照它们出现的顺序执行，在解析之后和DOMContentLoaded 触发之前。

而后者用于脚本跟随或 想要缩小导入的范围（例如，如此 回答）。

您要使用哪一个还取决于捆绑包中完成的工作。如果包只包含库，并且不产生任何副作用（即，与页面交互、渲染等），那么您可能需要导入它以便可以使用这些功能。

如果它确实有副作用（即渲染到 DOM 的 React 应用程序）并且是独立的，那么只需包含标签就足以启动它