两种方法都具有使该库可用于您的应用程序的类似效果。
HTML 方法使您的依赖项在运行时由浏览器获取和执行。就像您img在页面上包含s一样，您可以script在带有脚本源的页面上包含s ，可以是内联的，也可以是来自其他 URI 的。因此，假设您创建了一个 HTML 页面，script在它周围放置了许多标签，然后在浏览器中点击该页面。您的浏览器将扫描 HTML 页面，识别所有script标签并开始下载它们。它也将记住其中的顺序script被发现标签，它会分析并依次执行它们（除非你使用async和defer属性对他们）。
好吧，浏览器看到由各种元素组成的 HTML 页面，包括一些script标签，下载它们（可能是并行的），并执行它们（顺序）。现在，这些脚本在页面上可能了解也可能不了解彼此。
现在，让我们进入依赖于各种 Javascript 库的 React 和其他丰富的 Javascript 应用程序的领域。
当您执行Javascript Module Bundlingie时，您的 Javascript 编译器import { something } from "package"会在编译时获取此信息，例如当您执行时通过 create-react-app 进行 React npm run build，或 Angular 的等效脚本，或其他编译器（如 webpack 等）。这些编译器不仅会扫描单个文件，而是整个应用程序。他们通常从一个入口点开始，例如index.jsx，然后发现依赖关系图并递归地遍历他们识别的每个文件或module，并发现这些依赖关系等等。一旦编译器完成发现、解析、构建和捆绑您的应用程序，您通常最终会得到一个 Javascript 文件（例如main.[some hash].js），它是您的应用程序和所有依赖项（您使用的所有其他module）imported) 捆绑在一个文件中。
所以，你看到最大的区别是：
为了说明更大的区别，我将抛开诸如包拆分和动态引用等概念；当您进一步深入研究它们时，您最终会阅读每种方法的变化。
HTML脚本优势：
它们是独立获取的，可能是从 CDN 获取的，如果另一个网站需要它们并之前下载过它们，它们甚至可能已经缓存在您的浏览器中。所以像 jQuery、loDash 等都是可能已经下载的常见包，您的浏览器将从其内部缓存中受益。
它们可以并行下载；尽管您可以依靠浏览器来确保它们按顺序执行。因此，例如，如果您有自己的依赖于 jQuery 的脚本已经被加载，您需要做的就是<script src="jquery.min.js" />先然后然后<script src="myscript.js">这个顺序将被尊重。
Javascript module优势
您的代码可能不需要整个 jQuery、lodash 或您引用的任何其他库。通过在源代码中导入您需要的依赖项的任何函数，智能编译器可能能够巧妙地将这些函数从较大的库中剔除（摇动库），最终您将得到一个较小的整体下载有效载荷。
你的整个包可以被缩小，产生一个优化的包。
您的整个包将（/可以）在一个文件中。一次下载，您的整个应用程序已加载并可供使用。无需担心从各种 URL 下载各种资源。
混合方法没问题
随意使用混合解决方案！如果你检查你编译的 React 代码，你会看到create-react-app编译器会<script src="static/js/main.js" /> element at the end of your HTML document. This means that your app can rely on other在你的 HTML 文档中注入一个包含更高层的`s。所以，可以随意加载一些 HTML 库，并通过 JS module引用其他库。事实上，有些情况下您会想要这样做；例如，可以通过 HTML 脚本指令轻松地包含 Google Maps 脚本，并且您的 React 应用程序仍然可以使用 GMaps 库。