我正在使用以下项目:
该应用程序同时呈现服务器端和客户端端。
我正在使用
@loadable/component
通过这种方式动态地进行代码拆分。router.tsx
import * as React from 'react'
import loadable from '@loadable/component'
import { Route, Switch } from 'react-router-dom'
const NotFound = loadable(() =>
import('../components/NotFound/NotFound' /* webpackChunkName: "notfound" */)
)
const routes = (
<Switch>
<Route component={NotFound} />
</Switch>
)
export default routes
加载页面时,此错误会出现在控制台上,并且页面似乎会滑动一秒钟。
react-dom.development.js:546 Warning: Did not expect server HTML to contain a <div> in <main>.
当我检查双方(服务器/客户端)的输出时,它们是相同。
当我像下面这样删除
@loadable/component
时,它可以工作并且错误消失了。路由器无负载.tsx
import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import NotFound from '../components/NotFound/NotFound'
const routes = (
<Switch>
<Route component={NotFound} />
</Switch>
)
export default routes
似乎与
@loadable/component
有关,但我不确定100%。 最佳答案
最后有一个答案:
@loadable/component
正常工作,您需要以这种方式在文件路径的前面放置魔术webpack注释(/* webpackChunkName: "notfound" */
)。 const NotFound = loadable(() =>
import(/* webpackChunkName: "notfound" */ '../components/NotFound/NotFound')
)
引用:
https://github.com/smooth-code/loadable-components/issues/23
ChunkExtractorManager
中,然后传递客户端提取程序(我正在传递服务器提取程序,文档中并不太清楚)。 const statsFile = path.resolve('./wwwroot/dist/loadable-stats.json')
const extractor = new ChunkExtractor({
statsFile,
entrypoints: ['client'] // name of the proper webpack endpoint (default: main)
})
<ChunkExtractorManager extractor={extractor}>
<App />
</ChunkExtractorManager>
这是有关如何实现它的正确清晰的示例:
https://github.com/iamssen/seed
更新24.09.2019
添加到官方文档
https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/#chunkextractor-entrypoints