0

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

我的应用程序中有两条路线：Home和About.

Going to / (Home) 可以按需要工作：react-loadable识别home捆绑包，为其注入<script>标签，然后将页面发送到门外。客户端加载所有捆绑包并在没有闪存的情况下进行反应。

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

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

4

1 回答 1

1

发生这种情况是因为react-loadable没有针对server side rendering.

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

在插件存储库中它说：

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

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

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

这样，您的资产就会被管理并自动加载到您的输出中，从而避免您报告的错误。

于 2018-10-30T14:05:37.660 回答