React SSR 代码拆分：Lodable.Capute 未捕获模块名称答案

【问题标题】：React SSR code splitting: Lodable.Capute is not capturing the module nameReact SSR 代码拆分：Lodable.Capute 未捕获模块名称
【发布时间】：2019-12-01 00:34:34
【问题描述】：

我在我的代码拆分模块中使用react-lodable，但我在整个故事的服务器端遇到了问题，似乎当我在我的节点服务器中使用这段代码时server.js 文件：

let modules = []

const markup = renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <StaticRouter location={req.url} context={{}}>
      <App />
    </StaticRouter>
  </Loadable.Capture>
)

console.log(modules) // this is always an empty array

React Lodable 无法捕获模块，modules 始终是一个空数组。我阅读了很多关于这个问题的帖子，有人说你应该正确导入你的组件here。另一方面，文档说如果您在 .babelrc 文件中导入 react-lodable/babel 预设，它将解决问题。 我将它添加到我的 babelrc 文件中，但没有任何改变；它仍然是空的。

这是我的延迟加载组件之一：

import React from 'react'
import Loadable from 'react-loadable'


const B_async = Loadable({
  loading: () => <h1>loading B...</h1>,
  loader: () => import('./B.component')
})


export default B_async

为什么我的 Lodable 不能捕获模块？

【问题讨论】：

标签： javascript reactjs lazy-loading server-side-rendering

【解决方案1】：

在服务器端使用 Loadable.preloadAll() 可能会解决您的问题。

Loadable.preloadAll().then(() => {
    server.listen(appConfig.server.port, (error) => {
      if (error) {
        console.log(`Failed to start rendering server :: ${error}`);
        throw error;
      }

      console.log(`Rendering server listening on http://${appConfig.server.host}:${appConfig.server.port}`);
    });
  });

【讨论】：