Question

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

请查看下面的所附屏幕截图

由脚本启动的是重新获取部分

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

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

如果有必要，我想提供更多信息

Answer 1

我认为我的一个项目也有类似的问题。我想我是通过包装如下

的客户端函数来解决此问题的

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

当浏览器接管时，对可加载服务器端进行重新渲染和重新反应

1 个答案: