React：可加载组件增加累积布局偏移(CLS)

在将服务器端渲染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(



)


客户端 ：

...
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import { hydrate } from 'react-dom'
...
hydrate(, appRoot)
...


可加载组件后的 SSR （CLS 分数不佳）：

服务器端 ：

...
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router-dom'
import { ChunkExtractor } from '@loadable/server'
import path from 'path'
...
const statsFile = path.resolve(`${process.env.APP_ROOT}${path.sep}public${path.sep}js${path.sep}loadable-stats.json`)
const extractor = new ChunkExtractor({ statsFile, publicPath: '/js' })
const jsx = extractor.collectChunks(



)
const scriptTags = extractor.getScriptTags()
const ssrApp = renderToString(jsx)
...


客户端 ：

...
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
...
loadableReady(() => { hydrate(, appRoot) })
...


注意事项：

• 根据PageSpeed和LightHouse，它是
  代码的整个 HTML部分（填充了路由的组件React Router）被移位，就好像 SSR 页面完全重新呈现，尽管使用hydrate.


• 如果没有Loadable Components，完全相同的代码不会导致布局偏移。