跳至主要内容
高级 SvelteKit 链接选项 预加载

在本练习中，/slow-a 和 /slow-b 路由在其 load 函数中都存在人工延迟，这意味着导航到它们需要很长时间。

你无法始终使数据加载得更快——有时它不受你的控制——但 SvelteKit 可以通过预测导航来加快导航速度。当 <a> 元素具有 data-sveltekit-preload-data 属性时，SvelteKit 将在用户将鼠标悬停在链接上（在桌面设备上）或点击它（在移动设备上）时立即开始导航。尝试将其添加到第一个链接

src/routes/+layout
<nav>
	<a href="/">home</a>
	<a href="/slow-a" data-sveltekit-preload-data>slow-a</a>
	<a href="/slow-b">slow-b</a>
</nav>

现在导航到 /slow-a 将明显更快。在悬停或点击时开始导航（而不是等待注册 click 事件）可能听起来没什么区别，但在实践中它通常可以节省 200 毫秒或更长时间。这足以成为迟钝和敏捷之间的区别。

你可以将属性放在单个链接上，或者放在包含链接的任何元素上。默认项目模板在 <body> 元素上包含此属性

<body data-sveltekit-preload-data>
	%sveltekit.body%
</body>

你可以通过为属性指定以下值之一来进一步自定义行为

  • "hover"（默认，在移动设备上回退到 "tap"）
  • "tap" — 仅在点击时开始预加载
  • "off" — 禁用预加载

使用 data-sveltekit-preload-data 有时可能会导致误报 - 即在预期不会发生的导航之前加载数据 - 这可能不理想。作为替代，data-sveltekit-preload-code 允许你预加载给定路由所需的 JavaScript，而无需急切加载其数据。此属性可以具有以下值

  • "eager" — 在导航后预加载页面上的所有内容
  • "viewport" — 预加载视口中显示的所有内容
  • "hover"（默认）如上所述
  • "tap" — 如上所述
  • "off" — 如上所述

你还可以使用从 $app/navigation 导入的 preloadCode 和 preloadData 以编程方式启动预加载

import { preloadCode, preloadData } from '$app/navigation';

// preload the code and data needed to navigate to /foo
preloadData('/foo');

// preload the code needed to navigate to /bar, but not the data
preloadCode('/bar');

在 GitHub 上编辑此页面

上一页 下一页
trailingSlash
1
<h1>home</h1>