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

Question

无法理解我刚刚在关于deno bundle命令的 Deno 手册部分末尾阅读的两个示例之间的区别：

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

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

或者您可以将其导入另一个 ES 模块以使用：

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

我的印象是这两种形式都达到了相同的效果（即“在浏览器继续解析页面之前立即获取并执行”），而后者用于跟随脚本或想要缩小导入的范围（例如，如本答案所示）。

• 第16.6.1.2模块中的探索ES6书出现这一评估同意。

• Reddit 线程差异 Es6 导入模块 vs 脚本 src=""似乎也证实了这一点：“不是将整个库转储到您的全局范围内，而是只包含您需要和实际使用的内容。 ”

---

这可能被认为是其他问题的重复（见列表底部），但这些答案对我没有多大帮助，而且辅助资料似乎也没有表明我的假设是否正确。（另一方面，我很有可能忽略了一些明显的东西，并且不得不提高我的阅读理解能力......）

• 加载 javascript 作为 ES6 模块或通过页面中的脚本标签（切线相关）
• 带有 src 的脚本标签和需要模块的脚本标签有什么区别？（看起来很有希望但不是关于 ES6 模块......）
• Javascript 中的经典脚本与模块脚本
• WHATWG：将 JavaScript 模块添加到 Web 平台
• 从 HTML 文件中的 script 标签导入 js。可能的？
• 导入 js 库或在 html <script> 标签中引用它有什么区别（与 ES6 模块无关）
• 在浏览器中使用 ES6 模块时，我应该在 `script` 标签中引用文件吗
• html 中的 ES6 导入 vs <script src>

Answer 1

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

是的，这两者会产生相同的效果

（即“在浏览器继续解析页面之前立即获取并执行”），

不会，默认情况下任何<scriptwithtype="module"都会这样defer，因此加载不会阻止解析。然后，在解析之后和触发之前，所有延迟的脚本都会按照它们出现的顺序执行DOMContentLoaded。

当脚本遵循或想要缩小导入范围时使用后者（例如，如本答案中所示）。

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

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