Lighthouse 性能分为什么突然掉到30分？

夏侯一涵提问于 2026-03-08 21:41:21 阅读 563

工具

我最近用 Lighthouse 测了一个 React 页面，性能分从 80 多直接掉到 30 分，完全没动过关键资源加载逻辑，很困惑。

页面结构很简单，就是个带懒加载图片的列表，但 Lighthouse 报告说「Reduce unused JavaScript」和「Eliminate render-blocking resources」问题严重。下面是我组件里的一段代码：

import { lazy, Suspense } from 'react';

const LazyImage = lazy(() => import('./LazyImage'));

function ImageList() {
  return (
    <div>
      {[1, 2, 3].map(id => (
        <Suspense key={id} fallback={<div>Loading...</div>}>
          <LazyImage src={<code>/img-${id}.jpg</code>} />
        </Suspense>
      ))}
    </div>
  );
}

我已经用了 Suspense + lazy，按理说 JS 不该阻塞渲染啊，怎么还会被扣这么多分？是不是动态导入反而让 Lighthouse 误判了？

我来解答赞 1 收藏

反馈

1 条解答

司徒尚文 Lv1

React.lazy动态导入确实会触发额外的网络请求，Lighthouse在测试时会把这算作阻塞资源。最简单的办法是把懒加载图片组件改成普通img标签加IntersectionObserver自己实现懒加载：

function LazyImage({ src }) {

  const imgRef = useRef();

  const [loaded, setLoaded] = useState(false);



  useEffect(() => {

    const observer = new IntersectionObserver(([entry]) => {

      if (entry.isIntersecting) {

        setLoaded(true);

        observer.unobserve(imgRef.current);

      }

    });

    observer.observe(imgRef.current);

    return () => observer.disconnect();

  }, []);



  return loaded ?  : ;

}

这样既保持懒加载功能又不会触发Lighthouse的JS阻塞警告。测试时记得用生产环境build，开发模式的React会自带性能损耗。

2026-03-08 22:01