我正在尝试使反应可加载与服务器端渲染一起工作。我有一个相当大的应用程序,使用多个 HOC,其中
connect
组件、添加路由器等。
组件似乎运行良好,而不是通过
react-redux
或其他 HOC 连接的智能组件。
react-loadable
似乎不是这样,所以这是作为单独的模块,并且在创建的 .json
中抛出了 undefined
。
正确加载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"
},
...
],
不加载的smart组件示例:
"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
的事实有关,而 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 -分割设置-9da57df2040a