先把当时的情况摆出来。为了拆分包体,把文章正文组件改成 React.lazy 动态导入,蜘蛛抓到的 HTML 里只剩一个空容器,正文完全不在。

把日志和配置对完,能解释这个现象的基本就这几处。动态 import 的 chunk 要等主包执行后才请求,抓取时没触发。另一种情况是Suspense 的 fallback 是骨架屏,被抓取当作正文。

另外,没有做 SSR,服务端渲染输出的是空容器。少数情况下是懒加载边界划在正文上,关键内容被推到第二个请求。

动手时先看原始 HTML 里有没有正文

curl -s https://www.example.com/post/1 | grep -c 'skeleton'

接着把正文组件改回同步导入

sed -i "s#const Body = lazy(() => import('./Body'))#import Body from './Body'#" src/Post.jsx

只对首屏之外的模块保留懒加载

grep -rn 'lazy(' src/ | head -20

末了重新构建并核对产物

npm run build && grep -o '文章正文' dist/index.html

恢复的判定其实很直接。构建产物里能直接 grep 到正文首段,PSI 的 LCP 元素不再是骨架屏。

提醒一点。懒加载省的是首包体积,代价是首屏内容延后,正文这种关键内容永远不该被拆出去。线上能稳定复现的问题都不算难,难的是只在大流量下才出现的那种。

作者 9823189