Reactjs 反应：可加载组件增加累积布局移位（CLS）

将服务器端渲染应用程序迁移到可加载组件以进行代码拆分和延迟加载后，初始包大小（因此其下载时间）会如预期的那样减少。 但是，在用可加载组件方法替换经典的React渲染方法之后，在应用程序代码的其余部分不变的情况下，我在PageSpeed/LightHouse中的累积布局偏移分数从0.05上升到1或更多。 我的意思是，即使没有动态加载任何组件，情况也会变得更糟

我做错了什么

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

服务器端：

。。。
从“React”导入React
从'react dom/server'导入{renderToString}
从“react router dom”导入{StaticRouter}
...
const ssrApp=renderToString(
)

客户端：

。。。
从“React”导入React
从“react router dom”导入{BrowserRouter}
从'react dom'导入{hydroge}
...
水合物（，近似）
...

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

服务器端：

。。。
从“React”导入React
从'react dom/server'导入{renderToString}
从“react router dom”导入{StaticRouter}
从'@loadable/server'导入{ChunkExtractor}
从“路径”导入路径
...
const statsFile=path.resolve（`${process.env.APP_ROOT}${path.sep}public${path.sep}js${path.sep}可加载的stats.json`）
const extractor=new ChunkExtractor（{statsFile，publicPath:'/js'}）
const jsx=extractor.collectChunks(
)
const scriptTags=extractor.getScriptTags（）
const ssrApp=renderToString（jsx）
...

客户端：

。。。
从“React”导入React
从“react router dom”导入{BrowserRouter}
从'react dom'导入{hydroge}
从'@loadable/component'导入{loadableReady}
...
loadableReady（（）=>{水合物（，appRoot）}）
...

注意事项：

• 根据PageSpeed and LightHouse的说法，整个代码的HTML
  部分（填充了使用

  React Router

  路由的组件）发生了移动，就好像SSR页面是使用

  Hydrote

  完全重新命名的
• 如果没有可加载的组件，完全相同的代码不会导致布局改变

---

我发现React.lazy（）和CLS存在问题。删除React.lazy（）可以提高CLS，但会增加FCP、速度指数和LCP。添加React.lazy（）有助于提高FCP、LCP和SI，但成本以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 'react-dom'
...
hydrate(<BrowserRouter><App /></BrowserRouter>, appRoot)
...

...
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(
  <StaticRouter location={`/${this.requestedPage.uri}`} context={{}}>
    <App user={currentUser} requestedPage={this.requestedPage} />
  </StaticRouter>
)
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(<BrowserRouter><App /></BrowserRouter>, appRoot) })
...