0

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

请看下面的附加屏幕截图

由Script发起的是refetching部分

在此处输入图像描述 解析发生在服务器端，脚本部分发生在客户端

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

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

4

1 回答 1

-1

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

window.onload = () => { 
  Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })
}
于 2018-09-07T12:20:42.740 回答