跳到主要內容
進階 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>