小编Lud*_*vic的帖子

在将服务器端渲染React应用程序迁移到可加载组件以进行代码拆分和延迟加载后，初始包大小及其下载时间按预期减少。然而，在将经典的React渲染方法替换为Loadable Components 之后，在其余应用程序代码不变的情况下，我在PageSpeed / LightHouse 中的累积布局移位得分飙升，从 0.05 到 1 或更高。我的意思是即使没有动态加载任何组件，否则情况会更糟。

我做错了什么？

可加载组件之前的 SSR 代码（良好的 CLS 分数）：

服务器端 ：

...
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router-dom'
...
const ssrApp = renderToString(
  <StaticRouter location={`/${this.requestedPage.uri}`} context={{}}>
    <App />
  </StaticRouter>
)

客户端 ：

...
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import { hydrate } from …