React.js 应用程序是否会根据请求完全发送到浏览器？答案

【问题标题】：Does a React.js app get entirely shipped to the browser on request?React.js 应用程序是否会根据请求完全发送到浏览器？
【发布时间】：2018-07-19 14:07:09
【问题描述】：

这听起来像是一个非常愚蠢的问题，但整个 React 应用程序是否会在第一页加载时发送到浏览器？还是根据需要发送到浏览器？如果是按需发货，那么谁来决定什么时候需要什么？

假设它是一个 3 页的页面。（例如 /login、/users、/users/:userId）。

我可能只检查网络调用或卷曲我的服务器...但我认为这是轶事，并希望获得更全面的想法。

【问题讨论】：

这取决于你如何构建它。它绝对可以分成几部分，并按需引入某些部分。
@KevinB 这种分离发生在哪里？是在目录级别完成的吗？它是在反应应用程序的源代码中完成的吗？是在服务器上完成的吗？
我是在路由级别完成的。例如，我的根页面在 app.part.js、vendor.part.js 和 0.part.js 中加载，然后每个额外的路由都有它自己的 n.part.js，在第一次加载这些路由被要求。（由 webpack 处理）
好的，所以它是一个网络包的东西。如果一个人不使用 web pack，那么可能一个人的应用程序没有模块化
我敢肯定还有其他方法，webpack 只是本月的味道。

标签： javascript reactjs web browser

【解决方案1】：

这不是 React 特有的问题，称为选择捆绑策略，它转换为您如何将资源文件（js、css 等）传送到浏览器。需求与完全预加载与前者的混合......这真的取决于你如何构建你的应用程序。例如，有许多应用程序基于应用程序路由加载不同部分。这将按需进行。不同的方法各有利弊，您通常应该考虑您的包大小、缓存策略等。

我建议您查看webpack，这是实现这一目标的当今标准。

【讨论】：

这种分离发生在哪里？是在目录级别完成的吗？它是在反应应用程序的源代码中完成的吗？它是在服务器的源代码中完成的吗？是不是默认情况下，没有任何意图，整个 react/angular 应用程序将作为一个巨大的“捆绑包”发货？
通常它的工作方式是 webpack（或类似的捆绑工具）检查您的应用程序代码依赖关系并输出一个捆绑文件（或多个），然后浏览器可以加载该文件。既不是反应应用程序的一部分，也不是服务器代码的一部分。只是目录中的另一个文件（或cdn等）
所以如果一个人没有使用 webpack（或者没有配置一个类似的捆绑工具），那么简单地说：没有捆绑发生
没错。我建议您在决定采用哪种方法之前多阅读有关该主题的内容。