0

我进行了服务器端渲染，当我打开网络查看控制台时，我收到了 2 条错误消息。

第一条错误消息：

Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster. See https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build for more details.

在我的 webpack.config.js 中，我确保我使用了这个插件。

plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false 
]

第二条错误信息：

Warning: 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) id="27" >< option id="cbhlnhfolziayudi" da
    (server) id="27" >< option id="dktswsr" data-reacti
4

1 回答 1

0

你在问两个问题。我将一一解决：

反应生产警告

由于您使用的是 Webpack，因此您可以使用DefinePlugin插件来消除构建中的死代码。这是必要的，因为 ReactJs 有很多在开发环境中记录消息的日志代码。

plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"',
      }),
   ],

React 尝试重用标记

这个错误是不言自明的。从服务器发送的呈现的 HTML 代码与客户端呈现的 DOM 不匹配。当您使用的组件具有未在服务器上运行的异步代码时，通常会发生这种情况。如果你正在使用 Redux，你可以按照本教程在服务器上渲染 redux 状态。

于 2016-12-11T03:35:52.730 回答