我正在尝试使用服务器端渲染使反应可加载的工作。我有一个相当大的应用程序,使用多个HOC connect
组件,添加路由器等。
组件似乎运行良好,而是通过react-redux
或其他HOC连接的智能组件。 react-loadable
似乎没有将其作为单独的模块,并且在创建undefined
抛出.json
中。
正确加载的哑组件示例:
"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上没有问题部分。
欢迎任何建议或帮助。提前谢谢。
只是一个疯狂的猜测,但我认为这与你导入index.js
的事实有关,而反应加载不会在Loadable.Capture
中拾取这一点。或者 wepback 插件没有在 react-loadable.json
文件中创建正确的映射。
我在生产应用程序中使用的一个技巧(包括 react-router、redux、react-loadable(是使用 webpack 的命名块:
const AsyncComponent = Loadable({
loader: () => import(/* webpackChunkName: "myNamedChunk" */ './SomeComponent'),
modules: ['myNamedChunk']
});
通过这种方式,您可以控制模块名称并显式告诉 react-loadable 要映射的内容。
我还写了一篇关于如何在创建-反应-应用程序项目中实现这一目标的文章:https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a