浏览器接管时反应可加载的服务器端重新渲染和重新获取答案

【问题标题】：React loadable server side rerendering and refetching when browser takes over浏览器接管时反应可加载的服务器端重新渲染和重新获取
【发布时间】：2019-02-06 14:36:41
【问题描述】：

我一直在尝试将 React 可加载库与 Webpack 4 一起使用。在 SSR 上，页面加载正确（加载了所有异步导入内容）。但是，异步组件消失了一会儿。 react-loadable.json 似乎没有正确的信息，因为它没有获取页面所需的所有块（以某种方式在服务器端正确显示）。当我 console.log 块时，只显示了几个块。这可能是因为某些路线是动态的吗？

请看下面的截图

由Script发起的是重取部分

解析发生在服务器端，脚本部分发生在客户端

我如何从 react-loadable.json 中捕获所需的块

  renderToString(
            <Provider store={store}>
              <StaticRouter location={urlPath} context={context}>
                <Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
                  <AppRoot/>
                </Loadable.Capture>
              </StaticRouter>
            </Provider>
          )



console.log('last',  getBundles(stats, modules))

产品服务器

Loadable.preloadAll().then(() => {
  app.listen(PROD_PORT, (error) => {

  })
});

客户端

Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })

分块设置

    styles: {
      name: 'styles',
      test: /\.css$/,
      chunks: 'all',
      enforce: true
    },
    vendors: {
      name: 'vendors',
      chunks: 'all',
      reuseExistingChunk: true,
      priority: 20,
      enforce: true,
      test(module, chunks) {
        const name = module.nameForCondition && module.nameForCondition();
        return chunks.some(chunk => {
          return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
        })
      }
    },
    common: {
      name: 'app.js',
      chunks: 'initial',
      test: /\.js$/,
      reuseExistingChunk: true,
    },

如果有必要，我很乐意提供更多信息

【问题讨论】：

标签： reactjs webpack webpack-4 react-loadable

【解决方案1】：

我认为我的一个项目也遇到了类似的问题。我想我通过像下面这样包装客户端功能来解决它

window.onload = () => { 
  Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })
}

【讨论】：

我不能分享它的工作而不是我个人的东西 .. 我可以分享代码块而不是所有的 repo 肯定
不用担心，我想我的一个项目也有类似的问题。我想我通过用 window.onload = () => {} 包装客户端函数来解决它
实际上这种方法不能使用，因为它会大大减慢有意义的绘制速度