Reactjs 在安装包之后导入包与在创建新的react应用程序时将其包含在index.html中有什么区别？

当创建新的react应用程序时，我们使用CreateReact应用程序。它创建多个文件。其中index.html是呈现的html应用程序，其中根据react应用程序App.jsx放置多个jsx元素 我很好奇，导入谷歌字体、bootstrap、jquery和其他不同的外部插件的最佳方式是什么

正如我所研究的，有两种导入外部模块的方法。如果我们考虑从CDN导入的Bootstrap：

然后，导入的一种方法是将其放在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

#index.html代码的其余部分
#index.html代码的其余部分

另一种方法是使用

npmi安装引导程序bootstrap@4.3.1--保存

，然后将其作为导入放到src/index.js中

上述内容可以应用于多个地方。比如说，我们必须导入popper.min.js或jquery.js或导入css字体。哪个更好？是否将其放在index.html或index.js中？

---

另外，将该库放置在两个不同的位置之间的主要区别是什么？

两种方法都具有使该库可供应用程序使用的类似效果

HTML方法导致浏览器在运行时获取并执行依赖项。与在页面上包含

img

s非常相似，您可以在页面上包含

script

s，其中脚本的源代码可以是内联的，也可以是来自另一个URI的。因此，假设您创建了一个HTML页面，在其周围放置了许多

script

标记，然后在浏览器中点击该页面。您的浏览器将扫描HTML页面，识别所有

script

标记并开始下载它们。它还将记住找到

脚本

标记的顺序，并将按该顺序解析和执行它们（除非对它们使用

异步

和

延迟

属性）

好的，所以，浏览器看到由各种元素组成的HTML页面，包括一些

脚本
标记，下载它们（可能并行），然后执行它们（顺序）。现在，这些脚本可能知道也可能不知道页面上彼此的任何信息

现在，让我们进入React和其他富Javascript应用程序领域，它们依赖于各种Javascript库

当您进行
Javascript模块捆绑
时，即从“package”
导入{something}，这将在编译时被您的Javascript编译器获取，例如，当您进行
npm运行build
时，通过create React app进行反应，或Angular的等效脚本，或其他编译器，如webpack，这些编译器不仅扫描单个文件，而且扫描整个应用程序。它们通常从一个入口点开始，例如
index.jsx
，然后发现依赖关系图，递归地遍历它们识别并发现这些依赖关系的每个文件或模块等等。一旦编译器发现、解析、构建并绑定了你的应用程序，你通常会得到一个Javascript文件（例如，
main.[some hash].js
），它是你的应用程序和所有依赖项（你导入的所有其他模块）绑定在一个文件中

所以，你可以看到最大的区别是：


HTML脚本是浏览器在运行时下载和处理的独立资源

Javascript模块在编译时被发现，并最终与应用程序代码捆绑在一个文件中


为了说明更大的区别，我把诸如包拆分和动态引用等概念放在一边；当你深入研究每种方法时，你最终会读到它们的变化

HTML脚本的优点：
它们是独立获取的，可能来自CDN，如果其他网站需要它们，甚至可能已经缓存在您的浏览器中，并在以前下载过它们。因此，jQuery、loDash等都是可能已经下载的常见软件包，您的浏览器将受益于其内部缓存

它们可以并行下载；尽管您可以依靠浏览器来确保它们按顺序执行。因此，例如，如果您自己的脚本依赖于已经加载的jQuery，那么您所需要做的就是先
，然后
，这样的顺序将得到遵守

Javascript模块优势
您的代码可能不需要整个jQuery、lodash或您正在引用的任何其他库。通过导入源代码中所需的依赖项的任何函数，智能编译器可能能够巧妙地将这些函数从较大的库（树摇动库）中剥离出来，最终获得较小的总体下载负载

您的整个捆绑包可以缩小，从而产生一个优化的包

您的整个捆绑包将（/可以）放在一个文件中。只需下载一次，您的整个应用程序即可加载并随时可用。无需担心从各种URL下载各种资源

混合方法可以
请随意使用混合解决方案！如果检查编译的React代码，您将看到
createReact应用程序
编译器将在HTML文档的末尾插入
元素。这意味着您的应用程序可以依赖HTML文档中较高位置包含的其他
`s。因此，可以随意加载一些HTML库，并通过JS模块引用其他库。事实上，有些情况下你会想这样做；例如，包括谷歌地图脚本可以通过HTML脚本指令轻松完成，您的React应用程序仍然可以使用GMaps库