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

Question

在将服务器端渲染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 'react-dom'
...
hydrate(<BrowserRouter><App /></BrowserRouter>, 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(
  <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) })
...

注意事项：

• 根据PageSpeed和LightHouse，它是<main>代码的整个 HTML部分（填充了路由的组件React Router）被移位，就好像 SSR 页面完全重新呈现，尽管使用hydrate.
• 如果没有Loadable Components，完全相同的代码不会导致布局偏移。

Answer 1

如果您知道惰性 div 的高度和宽度，请设置惰性 div 容器的最小高度和宽度。因此用户不会看到布局有任何变化。在 div 的中心，您可以放置​​加载或微调器图标。

这样，用户将不会看到并改变其布局，并且确实会带来更好的用户体验。

注意 - 如果惰性 div 的大小不同，请使用平均值，这样偏移会较小并降低 CLS 影响分数。

.container{
  min-height: 500px;
  min-width: 800px;
}

<div class="container">
  <LazyDiv />
</div>