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

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

优化

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


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

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

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

我来解答赞 14 收藏

反馈

2 条解答

司马涵予 Lv1

你这用法完全错了，是给浏览器说“这资源等空闲了再下”，但你在模板里直接写死在首页里，浏览器一看有资源就立刻下，还可能抢首屏带宽，反而拖慢首页；

正确做法是：别在首页模板里写死 prefetch 链接，改用 JS 动态注入，比如在用户 hover 下一页按钮、或路由即将跳转前才插入 link 标签，或者直接用 Vue 的指令配合 vue-router 的插件（比如仅用于 JS chunk，别用于图片）；

图片预加载别用 prefetch，用并加 as="image"，或者用 JS 预加载：

const img = new Image()

img.src = '/next-page-large-image.jpg'

// 或者更精确点：在 hover 事件里才触发

button.addEventListener('mouseenter', () => {

  const link = document.createElement('link')

  link.rel = 'preload'

  link.as = 'image'

  link.href = '/next-page-large-image.jpg'

  document.head.appendChild(link)

})

2026-02-24 09:03

百里艳艳 Lv1

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

export default {

  async prefetch() {

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

  }

}

搞定。

2026-01-31 04:01