1

我目前正在尝试为反应服务器端渲染进行代码拆分。除了令人耳目一新的部分外，一切都很好。当我刷新页面时，一切都显示在服务器端。但是，在客户端接管延迟加载组件之前的那一瞬间消失了，然后当客户端再次开始渲染时它会显示出来。

"webpack": "^4.4.0", "mini-css-extract-plugin": "^0.4.0",

react-loadable.json 部分

{
  "undefined": [
    {
      "id": 2,
      "name": null,
      "file": "styles.css",
      "publicPath": "/dist/styles.css"
    }
   ...
  ]
}

样式样式的 webpack 块选项：{ name: 'styles', test: /.css$/, chunks: 'all', enforce: true },

Server.js react-loadable 设置部分

 let modules = []
      const context = {}
      const htmlRoot = (
        <Provider store={store}>
          <StaticRouter location={urlPath} context={context}>
            <Loadable.Capture report={moduleName => modules.push(moduleName)}>
              <AppRoot />
            </Loadable.Capture>
          </StaticRouter>
        </Provider>
      )

      const bundles = getBundles(stats, modules)
      console.log(bundles, modules)

即使所有页面都正确加载，bundles 变量总是空数组。有谁知道如何解决这个问题？或者什么可能导致这个问题？

4

1 回答 1

0

你的问题是你定义了你的htmlRoot，但你没有在调用之前渲染它getBundles。Loadable.Capture在呈现应用程序（以及本身）时收集捆绑包，这就是您的modules数组为空的原因。getBundles在渲染应用程序（例如）后调用，ReactDOMServer.renderToString并且应该填充模块数组。

我还发现 中有一些undefined条目react-loadable.json，但它们不会对react-loadable.

于 2018-10-02T15:10:01.530 回答