为什么在Lighthouse测试中首屏加载时间反而变长了？

Mr-文华提问于 2026-02-04 09:56:31 阅读 106

前端

最近在给项目做性能优化，把公共代码抽离成vendor chunk，还给图片加了懒加载，但Lighthouse测出来的首屏时间反而从2秒变成3秒了。明明控制台Network里总下载量少了200kb，这是怎么回事啊？

我检查过webpack配置：


optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    minChunks: 1
  }
}

这边配置没问题啊，而且浏览器开发者工具的Coverage也显示重复代码确实减少了…

难道是Lighthouse的测试环境有问题？还是首屏时间计算方式我理解错了？急得快要秃头了

性能测试

我来解答赞 8 收藏

反馈

2 条解答

Code°翼杨 Lv1

首屏时间变长大概率是因为vendor chunk太大，阻塞了关键渲染路径。试试这个：把初始化页面必须的代码分离出来，单独打包成一个entry chunk，让关键JS尽快加载。另外确认下懒加载图片的占位符是不是太大了，导致布局抖动影响性能。

optimization: {

  splitChunks: {

    cacheGroups: {

      vendors: {

        test: /[\/]node_modules[\/]/,

        priority: -10,

        chunks: 'initial'

      }

    }

  }

}

记得调整下Lighthouse的节流设置，用Fast 3G再测几次，别熬夜太晚，头发要紧。

2026-02-17 08:28

轩辕柯欣 Lv1

我之前踩过这个坑，你这种情况很可能是拆分 chunk 后导致**关键资源加载顺序被打乱了**，虽然总体积少了，但**首屏需要的 JS 被延迟加载了**，Lighthouse 的首屏时间就变长了。

Lighthouse 测的是**用户能实际看到内容的时间**，不是 Network 里那个 complete 时间。你把公共代码拆成 vendor chunk 后，如果主业务代码依赖 vendor，但浏览器要先下 vendor 再下 main，中间多了一个请求的 round trip，反而拖慢了首屏。

建议你看看 Network 面板里，**main.js 和 vendor.js 的加载顺序和开始时间**，是不是 main.js 要等 vendor.js 下完才开始下。如果是，那说明你拆 chunk 的方式反而让关键路径变长了。

你可以试试下面这个配置，把 vendor chunk 的优先级调高：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 30000,

    minChunks: 2,

    cacheGroups: {

      vendor: {

        test: /[\/]node_modules[\/]/,

        name: 'vendor',

        chunks: 'all',

        enforce: true,

        priority: 10

      }

    }

    // ...

  }

}

这样 vendor 会先加载，main.js 后加载但可以更快执行完，Lighthouse 的首屏时间才不会被拖慢。

另外，图片懒加载也可能影响 Lighthouse 的感知加载时间（LCP），你确认一下首屏关键图是不是没加懒加载？如果首屏图也懒加载了，但没在首屏触发，Lighthouse 就会认为你这图根本没加载，导致评分更低。

总之，别光看 Network 的总体积，关键是要让**首屏需要的资源尽早加载、尽早执行**。我被这个问题坑了一整天，血泪教训，希望你少走弯路。

2026-02-04 10:02