Question

我开始在＆＃34;通用＆＃34;中实施代码分割。 app（react-router，redux，webpack - 很大程度上基于https://github.com/erikras/react-redux-universal-hot-example）。

在实现代码拆分的（唯一）路由中，我在执行完整浏览器刷新时收到以下React错误消息：

warning.js:44Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <!-- react-empty: 1 -
 (server) <div class="root" dat

如果禁用代码拆分，错误消息就会消失。我猜这是因为React在Webpack加载器加载Javascript块之前进行了第一次渲染，因此，它生成的标记与服务器上生成的标记不同。这是对的吗？

我应该担心错误消息吗？
如何确定React在此消息出现的确切时间呈现的内容？
任何修复消息都会消失？（除了不使用代码分割）

Answer 1

解决方案是在执行第一次渲染之前调用react router的match函数。

请参阅https://github.com/reactjs/react-router/issues/2036#issuecomment-225792937和https://github.com/reactjs/react-router/blob/v2.4.1/docs/guides/ServerRendering.md#async-routes

Answer 2

我应该担心错误消息吗？

是的，如果React确定标记不同，它将无法重新使用任何现有标记，而是从客户端渲染重新生成它，从而为浏览器带来更多工作。

如何确定React在此消息出现的确切时间呈现的内容？

您可以通过在开发工具和通过网络发送的html中区分生成的源来比较差异。

任何使邮件消失的修复方法？（除了不使用代码拆分）

您可以按照答案中的建议拨打match，或者如果您没有使用React路由器，或者您的分割点未通过路由器设置，您可以预先加载所有必需的块，例如

<!-- index.html -->
<script src="entry.js"></script>
<script src="chunk1.js"></script>
<script>
    // NOTE: Instead of calling render immediately in `entry.js` you would need to define a function on the global to allow you to render the app after the second chunk has loaded.
    window.App.render();
</script>

注意：这仅在使用require.ensure时有效，因为System.import / import始终是异步的，这意味着标记在第一次渲染时仍会有所不同。

＆＃34; React试图重用标记＆＃34; webpack +代码拆分错误

2 个答案: