当，我们使用create-react-app来创建新的反应应用程序。它会创建多个文件。其中的索引.html是呈现的 html 应用程序，其中放置了多个 jsx 元素，具体取决于 react 应用程序 App.jsx 我很好奇导入谷歌字体、引导程序、jquery 和其他不同外部插件的最佳方法是什么？
正如我所研究的那样，有两种导入外部模块的方法。例如。如果我们考虑从 CDN 导入的引导程序：https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
然后，一种导入方法是将其放在 public/index.html 中：
# Rest of the index.html code
<div id="root"></div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
# Rest of the index.html code
另一种方法是使用npm i bootstrap@4.3.1 --save安装引导程序，然后将其作为导入放入 src/index 中.js 。
以上的东西可以应用于多个地方。比如说，我们必须导入popper.min.js或jquery.js或者导入css字体。哪个更好？将其放在索引中.html还是放在索引.js内？ 另外，将其放置在两个不同位置之间的主要区别是什么？
这两种方法都具有类似的效果，使该库可供应用程序使用。
HTML 方法会导致浏览器在运行时获取和执行依赖项。就像在页面上包含imgs一样，您可以在页面上包含script，脚本源可以是内联的，也可以来自另一个 URI。因此，假设您创建一个 HTML 页面，在其周围放置许多script标签，然后在浏览器中点击该页面。您的浏览器将扫描HTML页面，识别所有script标签并开始下载它们。它还会记住找到script标签的顺序，并按该顺序解析和执行它们(除非您对它们使用async和defer属性)。
好的，所以，浏览器看到由各种元素组成的HTML页面，包括一些script标签，下载它们(可能并行)，并执行它们(顺序)。现在，这些脚本可能知道也可能不知道页面上的彼此的任何信息。
现在，让我们进入React和其他丰富的Javascript应用程序的领域，它们依赖于各种Javascript库。
当你做Javascript Module Bundling即import { something } from "package"，这将在编译时被你的Javascript编译器拾取，例如当你做npm run build时通过create-react-app，或者Angular的等效脚本，或其他编译器，如webpack等。这些编译器不仅会扫描单个文件，还会扫描整个应用程序。它们通常从一个入口点开始，例如index.jsx，然后发现依赖关系图，并递归浏览它们标识的每个文件或模块，并发现这些依赖关系等等。一旦编译器完成发现、解析、构建和捆绑你的应用程序，你通常会得到一个 Javascript 文件(例如main.[some hash].js)，这是您的应用程序和所有依赖项(您import编辑的所有其他模块)捆绑在一个文件中。
所以，你看到最大的区别是：
-
HTML 脚本是浏览器在运行时下载和处理的独立资源。
-
Javascript 模块在编译时被发现，最终与应用程序代码捆绑在一个文件中。
为了说明更大的区别，我撇开了包拆分和动态引用等概念;当你进一步深入研究它们时，你最终会读到每种方法的变化。
HTML脚本的优点：
-
它们是独立获取的，可能来自 CDN，如果另一个网站需要它们并之前下载了它们，它们甚至可能已经缓存在您的浏览器中。因此，像jQuery，loDash等是可能已经下载的常见软件包，您的浏览器将受益于其内部缓存。
-
它们可以并行下载;尽管您可以依靠浏览器来确保它们按顺序执行。因此，例如，如果您自己的脚本依赖于 jQuery 已经加载，您需要做的就是先
<script src="jquery.min.js" />，然后再<script src="myscript.js">，该序列将被尊重。
Javascript 模块优势
-
你的代码可能不需要整个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 文档的更高位置。因此，请随意在HTML中加载一些库，并通过JS模块引用其他库。事实上，在某些情况下，您需要这样做;例如，包含谷歌地图脚本可以通过HTML脚本指令轻松完成，并且您的React应用程序仍然可以使用GMaps库。