预获取（prefetch）在单页应用中如何正确使用？为什么我的页面加载反而变慢了？

西门智颖提问于 2026-01-27 23:52:24 阅读 41

优化

我在开发一个Vue单页应用时，尝试给下一页的图片列表页面添加预获取。按文档写了类似下面的代码，但发现首页加载反而变慢了，控制台显示预加载了大量图片资源。这是不是预获取用错了？


<template>
  <div>
    <link rel="prefetch" href="/next-page-large-image.jpg" rel="external nofollow" >
    <!-- 还有更多图片链接 -->
  </div>
</template>

我参考了MDN的prefetch用法，以为这样能提升下一页加载速度。但实际测试发现，首页首屏渲染被阻塞了，网络面板显示这些大图片被立即下载。是不是预获取不该用在图片资源上？或者需要设置优先级？

加载优化打包优化渲染优化

我来解答赞 10 收藏

反馈

1 条解答

百里艳艳 Lv1

prefetch 会提前加载资源，但不会智能判断优先级，你首页变慢是因为它一次性下载了所有大图。解决办法：只预加载关键资源，或者用 lazy-loading。试试这个：

export default {

  async prefetch() {

    await import('/* 你的下一页关键数据或小图 */');

  }

}

搞定。

2026-01-31 04:01