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

html5 • • 问答

在将服务器端渲染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，完全相同的代码不会导致布局偏移。
以上是React：可加载组件增加累积布局偏移(CLS)的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>