React Loadable SSR 并不总是为客户端提供完整的包列表,导致页面闪烁

React Loadable SSR isn't always giving client complete list of bundles, leading to page flash

最近几天我一直在努力消除页面闪烁。我的项目从 create-react-app 开始,然后我使用 help to set up SSR and various other options. When I started running into problems, I stripped my code down and ejected. Here is my code. 您可以使用 npm run build 构建并使用 npm run serve 启动 SSR。访问 http://localhost:3000/ 查看结果。

我的应用中有两条路线:HomeAbout

Going to / (Home) 按预期工作:react-loadable 识别 home 包,为其注入 <script> 标签,然后将页面发送出去。客户端加载所有包并反应接管,没有闪光灯。

转到 /about 会导致页面闪烁(确保页面是从服务器加载的才能看到)。我将 moment-timezone 的导入添加到 about 组件中,webpack 巧妙地将其移动到自己的包中,与 about 包分开。问题是 react-loadable 只看到它需要 about 包,而不是包含时刻时区的额外包。因此,在客户端,当反应接管时,它发现它缺少一个模块,空白页面,加载包含缺少模块的包,然后重新呈现(至少, 我认为这就是它的工作原理。

我错过了什么?我正在使用 React-Loadable 自述文件中描述的 babel 和 webpack 插件。看起来 React-Loadable 只聪明到可以深入一层而看不到导入模块的依赖项是什么,但肯定不是这样,不是吗?

发生这种情况是因为 react-loadable 没有针对 server side rendering 的良好而深入的实现。

但好消息是,有一个附加组件,叫做 react-loadable-ssr-addon

在插件存储库中它说:

React Loadable SSR Add-on is a server side render add-on for React Loadable that helps you to load dynamically all files dependencies, e.g. splitted chunks, css, etc.

Oh yeah, and we also provide support for SRI (Subresource Integrity).

所以基本上这个插件会处理有关 server side rendering 资产情况的所有事情,重现与传统方法(客户端渲染)相同的行为。

有了它,您的资产将被管理并自动加载到您的输出,避免您报告的错误。