React Loadable SSR 并不总是给客户端完整的包列表，导致页面闪烁

Question

过去几天我一直在努力消除页面闪烁。我的项目从 create-react-app 开始，然后我使用 help 设置 SSR 和其他各种选项。当我开始遇到问题时，我剥离了我的代码并弹出。 Here is my code. 您可以使用npm run build 构建并使用npm run serve 启动SSR。访问http://localhost:3000/查看结果。

我的应用中有两条路由：Home 和 About。

Going to / (Home) 可以正常工作：react-loadable 识别 home 包，为其注入 <script> 标记，然后将页面发送出去。客户端加载所有捆绑包并 react 接管，无需 flash。

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

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

Answer 1

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

但好消息是，有一个附加组件，称为react-loadable-ssr-addon。

在插件库中它说：

React Loadable SSR Add-on 是 React Loadable 的服务器端渲染插件，可帮助您动态加载所有文件依赖项，例如分割的块、css等。

哦，是的，我们还提供对 SRI（子资源完整性）的支持。

所以基本上这个插件在反应中处理server side rendering 的所有资产情况，重现与传统方法（客户端渲染）相同的行为。

这样，您的资产将得到管理并自动加载到您的输出中，避免您报告的错误。