Pho*_*nix 4 font-awesome reactjs react-bootstrap
当我们在创建新的 React 应用程序时使用 create-react-app 。它创建多个文件。其中index.html是渲染的html应用程序，其中根据react应用程序App.jsx放置多个jsx元素我很好奇导入google字体、bootstrap、jquery和其他不同外部插件的最佳方法是什么？
据我研究，有两种导入外部模块的方法。例如。如果我们考虑从 cdn 导入 bootstrap：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
另一种方法是使用安装 bootstrap npm i bootstrap@4.3.1 --save，然后将其作为 import 放入 src/index.js 。
上面的东西可以应用到多个地方。比如说，我们必须导入 popper.min.js 或 jquery.js 或导入 css 字体。哪个更好？将其放在index.html 中还是index.js 中？另外，将它放在两个不同的地方的主要区别是什么？
这两种方法都会产生类似的效果，使该库可供您的应用程序使用。
HTML 方法会导致浏览器在运行时获取并执行您的依赖项。img就像您在页面上包含 s 一样，您可以script在页面上包含 s 以及内联或来自另一个 URI 的脚本源。因此，假设您创建了一个 HTML 页面，script在其周围放置了许多标签，然后在浏览器中点击该页面。您的浏览器将扫描 HTML 页面，识别所有script标签并开始下载它们。它还会记住找到标签的顺序script，并按该顺序解析和执行它们（除非您在它们上使用asyncanddefer属性）。
好吧，浏览器看到由各种元素组成的 HTML 页面，包括一些script标签，下载它们（可能并行），然后执行它们（顺序）。现在，这些脚本可能知道也可能不知道页面上彼此的任何信息。
现在，让我们进入 React 和其他丰富的 Javascript 应用程序领域，它们依赖于各种 Javascript 库。
当你执行Javascript Module Bundlingie时，这将在编译import { something } from "package"时被你的 Javascript 编译器获取，例如，当你执行 ie 时通过 create-react-app 进行 React ，或 Angular 的等效脚本，或其他编译器（如 webpack 等）。这些编译器不仅会扫描一个文件，而是整个应用程序。他们通常从入口点开始，例如，然后发现依赖关系图并递归地遍历他们识别并发现这些依赖关系的每个文件或模块等等。一旦编译器完成发现、解析、构建和捆绑您的应用程序，您通常会得到一个 Javascript 文件（例如），它是您的应用程序以及捆绑在一起的所有依赖项（您编辑的所有其他模块）文件。npm run buildindex.jsxmain.[some hash].jsimport
所以，你会发现最大的区别是：
HTML 脚本是独立的资源，由浏览器在运行时下载和处理。
Javascript 模块在编译时被发现，并最终与应用程序代码捆绑在一起在一个文件中。
为了说明更大的区别，我将忽略包分割和动态引用等概念；当您进一步深入研究时，您最终将了解每种方法的变化。
它们是独立获取的，可能是从 CDN 获取的，如果另一个网站之前需要它们并下载了它们，它们甚至可能已经缓存在您的浏览器中。因此，像 jQuery、loDash 等都是可能已经下载的常见软件包，您的浏览器将受益于其内部缓存。
它们可以并行下载；尽管您可以依靠浏览器来确保它们按顺序执行。因此，例如，如果您自己的脚本依赖于已经加载的 jQuery，那么您所需要做的就是<script src="jquery.min.js" />先加载然后加载<script src="myscript.js">，并且该顺序将得到尊重。
您的代码可能不需要整个 jQuery、lodash 或您引用的任何其他库。通过导入源代码中所需的依赖项的任何函数，智能编译器可能能够巧妙地将这些函数从较大的库中剔除（tree-shake 库），并且最终会得到一个较小的整体下载有效负载。
您的整个捆绑包可以被缩小，从而产生优化的包。
您的整个捆绑包将（/可以）位于一个文件中。只需下载一次，您的整个应用程序就已加载并可供使用。无需担心从各种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 模块引用其他库。事实上，在某些情况下您会想要这样做；例如，可以通过 HTML 脚本指令轻松包含 Google 地图脚本，并且您的 React 应用程序仍然可以使用 GMaps 库。