quicklink 是 google 开源的轻量级预加载库，通过视口检测与悬停触发，在浏览器空闲时以 预取 spa 下一路由 js 资源，实现秒开体验。
在单页面应用（SPA）中，利用用户悬停行为提前加载下一个路由的 JS 资源，是提升导航体验最直接有效的手段之一。它不改变路由逻辑、不重构代码，只靠“预判+预取”，就能把点击后的白屏或 loading 时间压缩到几乎感知不到。
quicklink 是什么？它怎么工作？
quicklink 是 Google 开源的轻量级预加载库，核心目标就是：当链接进入视口（或用户鼠标悬停其上）时，自动对目标页面的主资源发起 rel="prefetch" 请求。
它默认启用两项智能策略：
-
视口内预取：滚动时检测哪些
<a href="/detail"></a>已出现在可视区域，立即 prefetch 对应的 JS chunk -
悬停触发预取：监听
mouseover，只要用户在链接上停留 ≥100ms（可配），就触发预加载
使用极简：
<script src="https://unpkg.com/quicklink@2.3.0/dist/quicklink.umd.js"></script><script>quicklink.listen();</script>
它会自动识别同域内部链接，并基于 webpack/vite 构建产物中的 manifest 或路由映射，推测出该路由对应的 JS/CSS 资源地址（如 /assets/detail.abc123.js），然后插入 <link rel="prefetch" href="..."> 到 。
自己实现组件级悬停预加载（更可控）
如果你需要更精细控制——比如只对商品卡片、导航菜单项、或特定 class 的链接生效，或者想结合路由懒加载 chunk 名做精准预取，推荐手写轻量逻辑：
- 监听卡片
mouseenter，提取目标路由（如/product/123） - 查表匹配该路由对应的 chunk 文件名（可通过构建时生成的
manifest.json或约定命名规则获得） - 动态创建
<link rel="prefetch" href="xxx.js" as="script">并插入 - 为防重复，可用 Set 缓存已 prefetch 的 URL
示例（适配 Webpack/Vite）：
const prefetchChunk = (chunkName) => {
const url = `/assets/${chunkName}.js`;
if (prefetched.has(url)) return;
const link = document.createElement('link');
link.rel = 'prefetch';
link.as = 'script'; // 显式声明类型，避免降权
link.href = url;
document.head.appendChild(link);
prefetched.add(url);
};
// 卡片悬停时触发
card.addEventListener('mouseenter', () => {
prefetchChunk('product-detail'); // 对应 import('./pages/ProductDetail.vue')
});
关键细节：别让预加载失效或拖慢当前页
prefetch 本质是低优先级后台请求，但配置不当仍可能适得其反：
-
路径必须精确匹配：chunk 名带 hash（如
detail.a1b2c3.js）时，每次构建都变，需确保预取 URL 和最终<script></script>加载路径完全一致，否则重复下载甚至 404 -
不要漏写
as="script"：不加或写错（如as="module"），Chrome 会将其 Priority 降为 Low，失去预取意义 - 避免对非关键路由盲目预取：比如 footer 的“关于我们”链接，用户点击率极低，预取纯属浪费流量
-
配合
modulepreload更进一步：若入口是 ES Module 且含静态import，用rel="modulepreload"可递归预取依赖，比普通 prefetch 更彻底
和 preload、modulepreload 的区别要拎清
三者不是替代关系，而是各司其职：
-
rel="preload"：用于当前页马上要用的关键资源（如首屏 JS、字体），高优先级，必须配as -
rel="modulepreload"：用于当前页模块入口及其静态依赖，支持递归预取，适合现代 SPA 主包 -
rel="prefetch"：用于下一页可能用到的资源，低优先级，靠空闲带宽下载，正适合悬停场景
一个典型 SPA 页面， 里往往同时存在这三类 link：preload 主包、modulepreload 核心模块、prefetch 用户即将点击的详情页 chunk。
