React 可加载导入连接组件

Question

我正在尝试使用 ServerSide Rendering 使 react-loadable 工作。我有一个相当大的应用程序，它使用多个 HOC，其中 connect 组件，添加路由器等。

组件似乎没问题，而是通过react-redux 或其他 HOC 连接的智能组件。 react-loadable 似乎并没有将其作为单独的模块，并且在创建 undefined 的 .json 中被抛出。

正确加载的dumb组件示例：

"common/HeaderTitle": [
    {
      "id": 667,
      "name": "./src/app/components/common/HeaderTitle.jsx",
      "file": "0.650d44243e1a15fa7627.js"
    },
    {
      "id": 667,
      "name": "./src/app/components/common/HeaderTitle.jsx",
      "file": "0.650d44243e1a15fa7627.js.map"
    },
    ...
],

不加载的智能组件示例：

"undefined": [
    {
      "id": 626,
      "name": "./src/app/components/modules/Home/index.jsx",
      "file": "0.650d44243e1a15fa7627.js"
    },
    ...
],

我的服务器的 html 呈现如下所示。这里的所有内容都是从官方文档中复制的：

app.use((req, res) => {
    const modules = [];

    const html = SSR ? renderToString(
        <Provider store={store}>
            <StaticRouter location={req.url} context={{}}>
                <Loadable.Capture report={moduleName => modules.push(moduleName)}>
                    <App />
                </Loadable.Capture>
            </StaticRouter>
        </Provider>,
    ) : ' ';

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

    res.status(200).send(renderFullPage({ html, bundles }));
});

哪些日志符合预期：

modules [ './modules/Home' ]
bundles [ undefined ]
TypeError: Cannot read property 'file' of undefined

这真的让我发疯了。这个包看起来真的很好，我想使用它。但是我找不到任何关于此类问题的信息，而且 Github 上也没有问题部分。

欢迎任何建议或帮助。提前致谢。

Answer 1

只是一个疯狂的猜测，但我认为这与您正在导入 index.js 的事实有关，并且 react-loadable 在 Loadable.Capture 中没有发现这一点。或者 wepback 插件没有在 react-loadable.json 文件中创建正确的映射。

我在生产应用程序（包括 react-router、redux、react-loadable）中使用的一个技巧是使用 webpack 的命名块：

const AsyncComponent = Loadable({
    loader: () => import(/* webpackChunkName: "myNamedChunk" */ './SomeComponent'),
    modules: ['myNamedChunk']
});

这样你可以控制模块名称并明确告诉 react-loadable 映射什么。

我还写了一篇文章，介绍如何在 create-react-app 项目中实现这一点：https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a