创建新的React应用程序后，在安装后导入软件包或将其包含在index.html中有什么区别? [英] What is the difference between importing a package after installing it or including it in index.html when a new react application is created?
问题描述
何时，我们在创建新的React应用程序时使用create-react-app.它创建多个文件.在哪个index.html中是呈现的html应用程序，其中根据反应应用程序App.jsx放置了多个jsx元素我很好奇什么是导入Google字体，引导程序，jQuery和其他不同外部插件的最佳方法?
When, we use create-react-app while creating a new react application. It creates multiple files. Out of which index.html is the rendered html application, where multiple jsx elements are placed depending upon the react application App.jsx I was curious on what is the best way to import google fonts, bootstrap, jquery and other different external plugins?
正如我所研究的那样，有两种导入外部模块的方法.例如.如果我们考虑将从CDN导入的引导程序: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
As I have researched there are two ways of importing external modules. For eg. if we consider bootstrap that is to be imported from cdn: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
然后，一种导入方式是将其放置在public/index.html中:
Then, one way to import is place it in 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中.
Other way is to install bootstrap using npm i bootstrap@4.3.1 --save, and then put it as import in src/index.js .
以上内容可以应用于多个地方.说，我们必须导入popper.min.js或jquery.js或导入css字体.哪个更好?将其放置在index.html或index.js内?另外，将其放置在两个不同的地方之间的主要区别是什么?
The above thing can be applied to multiple places. Say, we have to import popper.min.js or jquery.js or import css fonts. Which is better? Placing it in index.html or inside index.js? Also, what is the major difference between placing it at the two different places?
推荐答案
两种方法都具有使该库可用于您的应用程序的类似效果.
Both approaches will have the similar effect of making that library available to your application.
HTML方法使您的依赖项在浏览器运行时被获取并执行.就像您在页面上包含 img 一样，您可以在页面上包含 script 以及脚本源或内联或来自另一个URI.因此，假设您创建一个HTML页面，在其周围放置许多 script 标记，然后在浏览器中访问该页面.您的浏览器将扫描HTML页面，识别所有 script 标记并开始下载.它还会记住 script 标记的顺序，并且将按该顺序解析和执行它们(除非您使用 async 和 defer 属性).
The HTML approach causes your dependencies to be fetched and executed at run-time by the browser. Much like you'd include imgs on a page, you can include scripts on a page with the source of the script either inline or from another URI. So, let's say you create an HTML page, put a number of script tags around it, and then hit that page in your browser. Your browser will scan the HTML page, identify all script tags and start downloading them. It will also remember in which order the script tags were found, and it will parse and execute them in that order (unless you use async and defer attributes on them).
好，因此，浏览器会看到包含各种元素(包括一些 script 标记)的HTML页面，下载它们(可能是并行的)，然后执行它们(顺序地).现在，这些脚本在页面上可能相互之间一无所知.
Ok, so, browser sees HTML page consisting of various elements, including some script tags, download them (probably in parallel), and execute them (sequentially). Now, these scripts may or may not know anything about each other on the page.
现在，让我们进入React和其他丰富的Javascript应用程序的领域，它们依赖于各种Javascript库.
Now, let's go to the realm of React and other rich Javascript apps, which depend on various Javascript libraries.
当您执行 Javascript模块捆绑(即从包"中导入{something} )时，您会在编译时领取.Javascript编译器，例如当您执行 npm run build 或Angular的等效脚本或其他编译器(例如webpack)时，通过create-react-app进行反应.这些编译器不仅扫描单个文件，而且扫描整个应用程序.它们通常从入口点开始，例如 index.jsx ，然后发现依赖关系图，然后递归地遍历它们标识的每个文件或模块，并发现这些依赖关系，依此类推.一旦编译器完成了发现，解析，构建和捆绑应用程序的工作，您通常会得到一个Javascript文件(例如 main.[some hash] .js )，这就是您的应用程序 AND 将所有依赖项(导入的所有其他模块)捆绑在一个文件中.
When you do Javascript Module Bundling i.e. import { something } from "package", this will get picked up at compile time by your Javascript compiler, e.g. React via create-react-app when you do npm run build, or Angular's equivalent script, or other compilers such as webpack, etc. These compilers will scan not just a single file, but rather your entire application. They typically start from an entry point, e.g. index.jsx, and then discover the graph of dependencies and recursively go through each file or module that they identify and discover those dependencies and so on and so forth. Once the compiler is done discovering, resolving, building, and bundling your app, you'll typically end up with a single Javascript file (e.g. main.[some hash].js) which is your application AND all dependencies (all those other modules you imported) bundled together in a single file.
因此，您看到的最大区别是:
So, you see the big distinction is:
-
HTML脚本是独立的资源，在运行时由浏览器下载和处理.
HTML scripts are independent resources that are downloaded and processed by the browser at run time.
JavaScript模块是在编译时发现的，最终与您的应用程序代码捆绑在一个文件中.
Javascript modules are discovered at compile time and end up being bundled together with your application code in a single file.
为了说明更大的区别，我将诸如打包拆分和动态引用之类的概念放在一边.当您深入研究每种方法时，您将最终了解每种方法的变化.
I'm leaving aside concepts such as package splitting and dynamic references, etc. in order to illustrate the larger distinction; you'll end up reading about variations in each approach as you dig further into them.
-
如果另一个网站需要它们并事先下载它们，则它们可能是从CDN中独立获取的，甚至可能已经缓存在您的浏览器中.因此，诸如jQuery，loDash等之类的东西是常见的软件包，可能已经下载了，您的浏览器将受益于其内部缓存.
They are fetched independently, perhaps from a CDN, may even already be cached in your browser if another website needed them and downloaded them previously. So things like jQuery, loDash, etc. are common packages that may have already been downloaded, and your browser will benefit from its internal cache.
它们可以并行下载；尽管您可以依靠浏览器来确保按顺序执行它们.因此，例如，如果您有自己的脚本已经依赖jQuery加载，那么您要做的就是先< script src ="jquery.min.js"/> < script src ="myscript.js"> ，该顺序将得到遵守.
They can be downloaded in parallel; although you can rely on the browser to ensure that they get executed sequentially. So for example if you had your own script that relied on jQuery having already been loaded, all you need to do is to <script src="jquery.min.js" /> first and then <script src="myscript.js"> and that sequence will be respected.
JavaScript模块的优势
-
您的代码可能不需要整个jQuery，lodash或您引用的任何其他库.通过在源代码中导入依赖项所需的任何功能，智能编译器也许能够巧妙地仅将那些功能从较大的库中剔除(对库进行摇晃)，最终得到的总体积较小下载有效负载.
Your code may not need the entire jQuery, lodash, or whatever other library that you're referencing. By importing whatever function of your dependencies that you need in your source code, a smart compiler might be able to artfully scalpel only those functions out of the larger library (tree-shake the library), and you'll end up with a smaller overall download payload.
您的整个捆绑包可以缩小，从而产生优化的包装.
Your entire bundle can be minified, yielding an optimized package.
您的整个捆绑包将(/可以是)在一个文件中.一键下载，您的整个应用程序已加载并可以使用.无需担心会从各种URL下载各种资源.
Your entire bundle will be (/can be) in a single file. One download, and your entire app is loaded and ready to use. No need to worry about downloading various resources from various URLs.
混合方法没问题
随意使用混合解决方案！如果检查已编译的React代码，则会看到 create-react-app 编译器将注入< script src ="static/js/main.js"/>HTML文档末尾的元素.这意味着您的应用程序可以依赖HTML文档中包含的其他`s.因此，可以随意加载HTML中的某些库并通过JS模块引用其他库.实际上，在某些情况下，您想这样做.例如，可以通过HTML脚本指令轻松完成包含Google Maps脚本的操作，而您的React应用仍可以使用GMaps库.
Hybrid Approach is OK
Feel free to use a hybrid solution! If you inspect your compiled React code, you'll see that the create-react-app compiler will inject a <script src="static/js/main.js" /> element at the end of your HTML document. This means that your app can rely on other`s included higher up in your HTML document. So, feel free to load up some libraries in HTML and reference other ones through JS modules. In fact, there are cases that you'd want to do this; for example, including the Google Maps script can be easily done via an HTML script directive, and your React app can still use the GMaps library.
这篇关于创建新的React应用程序后，在安装后导入软件包或将其包含在index.html中有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
