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

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

工具

我最近用 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 误判了？

我来解答赞 4 收藏

反馈

2 条解答

Good“景鑫 Lv1

看起来你遇到了典型的性能优化问题。虽然用了 lazy 和 Suspense，但还有几个地方需要注意。

首先检查你的 LazyImage 组件是不是加载了太多不必要的依赖。React 的懒加载确实可以减少初始加载时间，但如果 LazyImage 里引入了其他重量级库，反而会拖慢整体性能。

建议你对 LazyImage 做一下代码分割，把不必要的依赖都移出去。另外，尽量用纯函数组件来减少内存占用。像这样重构一下：



function LazyImage({ src }) {

  const imgRef = useRef();



  useEffect(() => {

    if (imgRef.current) {

      imgRef.current.src = src;

    }

  }, [src]);



  return ;

}

注意安全方面，动态导入时要确保第三方库的来源可信，防止引入恶意脚本。同时考虑给图片加上 loading="lazy" 属性，现代浏览器会对这个属性做专门优化。

还有一点容易被忽略：Lighthouse 测试时最好在干净的环境运行，关闭所有不必要的插件和扩展程序，它们可能会影响测试结果。我之前就遇到过这种情况，装了太多开发工具，导致分数不准。

最后提醒一句，性能优化是个持续的过程，不要指望一次调整就能完美解决。慢慢来，观察每次改动的效果。

2026-03-28 05:01

司徒尚文 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