javascript - 如何调试 ReactJs/Redux 中浏览器网络操作的意外时间间隙？

Question

我的应用程序使用 React/Redux，该应用程序捆绑在 main.5ae1d536.js 文件中。正如您所看到的，应用程序的下载与其他下载之间存在相当大的差距(几乎 1 秒!)。其余的下载基本上是图像以及应用程序启动时拍摄的其他 HTTP 请求。

我已经对 React 应用程序进行了大量测试，我确信一切都运行得很好。尽管如此，我还是无法弄清楚这个差距是什么，消除它或减少它至少会显着改善我的应用程序的响应时间。

你觉得怎么样？

更新，包括分析器屏幕截图。其余下载的触发方式是通过各种 componentDidMount 生命周期方法。其他似乎是由 Modernizr 触发的，如屏幕截图所示，或者是调用以检索 React 生成的 HTML 所需的字体文件或图像。

Answer 1

您应该使用 React 应用程序的服务器端渲染。然后浏览器获得正确的 html，并可以立即请求其他资源(因为它们是从生成的 html 链接的)。如果没有 ssr，浏览器必须先下载并运行 JS，然后才能识别和请求其他资源。

谷歌一下reactjs服务器端渲染。设置起来有点棘手，但值得努力，因为它还可以提高谷歌排名。如果没有 ssr，Google 只会看到一个空白页面，因为它不会评估 JS。