Ajax 是否显示加载进度条直到完全下载JS web应用？

我使用的是ReactJS，由于SPA应用程序提供初始index.html，然后使用AJAX调用下载其余的html/javascript/css，您能否使用这些AJAX调用上的进度事件创建准确的加载栏

---

有人知道如何在ReactJS中实现这一点吗？

我过去实现这一点的方式有点硬编码，但很有效。本质上，我在状态中有两个变量。一个用于

加载进度

，表示总体加载进度。这是用户看到的值。另一个是

numoajaxcalls

。这表示需要进行的ajax调用的总量。我在内部使用它来计算

加载进度

基本上，我使用ajax的请求进度来确定任何单个ajax调用的状态。在我的

xhr.onprogress

函数中，我使用此计算更新状态：

const loadingProgress = event.loaded / (event.total * (100 * this.state.numOfAjaxCalls));
this.setState({
    loadingProgress: loadingProgress
});

---

谢谢你的回答！如何处理React的ajax调用以及有多少调用？index.html是由React生成的，不是吗？它是由bundler生成的。其他所有内容都与索引文件位于同一服务器上（除非您包含来自CDN的脚本）。我实际上误解了你最初的问题。我的方法在应用程序加载后开始加载，我开始调用数据。我不知道有什么方法可以访问React的内部请求来解析包含的文件。但是，我知道这是在安装组件之前发生的，所以除非你的应用程序正在解析异常数量的脚本，或者你正在从异常缓慢的服务器请求，否则我认为用户不会注意到。同样值得注意的是，React不加载html，它使用Javascript来构建DOM。据我所知，外部JS和CSS是惟一需要获取的东西。其他所有内容都包含在捆绑包中，并作为单个.js/.css文件加载，该文件由浏览器加载，而不是React本身。我正在使用webpack捆绑我的ReactJS项目。它使用HtmlWebpackPlugin注入脚本标记，用于在index.html中下载包的其余部分。我想知道是否有什么方法可以自定义它，这样我就可以继续下载捆绑包了。