当浏览器接管时，React可加载服务器端重新渲染和重新获取

Posted 2021-04-10

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

请看下面的附加屏幕截图

脚本启动是补充部分

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

我如何从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,
    )
  })

Split Chunks设置

    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,
    },

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

答案

我想我的一个项目遇到了类似的问题。我想我通过包装客户端功能解决了它，如下所示

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