跳转到内容

@astrojs/prefetch

注意:@astrojs/prefetch 已被弃用。请使用 Astro 3.5 中的 prefetch 功能。可查看 迁移指南

页面加载时间对于网站的可用性和整体体验起着至关重要的作用。通过在屏幕上可见时预请求页面链接,此集成将近乎即时的页面导航的优点带到了你的多页应用程序(MPA)中。

为了进一步提高用户体验,特别是在类似页面上,样式表也会与 HTML 一起预请求。当在静态网站的选项卡之间导航时,这尤其有用,因为大多数页面的内容和样式都不会改变。

astro add 命令行工具可以自动为你安装。在新的终端窗口中运行以下命令之一。(如果你不确定正在使用哪个包管理器,请运行第一个命令。)然后,跟随提示,在终端中输入“y”(表示“是”)来确认每个命令。

Terminal window
# 使用 NPM
npx astro add prefetch
# 使用 Yarn
yarn astro add prefetch
# 使用 PNPM
pnpm astro add prefetch

如果遇到任何问题,请随时在 GitHub 上向我们报告,并尝试下面的手动安装步骤。

首先,使用你的包管理器安装@astrojs/prefetch包。如果你使用的是 npm 或不确定,请在终端中运行以下命令:

Terminal window
npm install @astrojs/prefetch

然后,使用 integrations 属性将此集成应用于你的 astro.config.* 文件:

astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';
export default defineConfig({
// ...
integrations: [prefetch()],
// ^^^^^^^^^^
});

当你安装集成时,预请求脚本会自动添加到项目中的每个页面中。只需在页面上的任 <a /> 链接中添加 rel="prefetch",你就可以开始使用了!

此外,你可以将 rel = prefetch-intent 添加到页面上的任何 <a /> 链接中,以仅在悬停,触摸或聚焦时预请求它们。在查看你的网站时,这尤其有用以节省数据使用。

Astro Prefetch 集成处理站点上的哪些链接被预请求,它有自己的选项。更改这些选项在 astro.config.mjs 文件中,这是你的项目集成设置所在的位置。

默认情况下,预请求脚本会搜索页面上包含 rel="prefetch" 属性的任何链接,例如:<a rel="prefetch" /><a rel="nofollow prefetch" />。在查找预请求链接时,可以在 astro.config.* 文件中更改此行为,以使用自定义查询选择器。

astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';
export default defineConfig({
// ...
integrations: [
prefetch({
// 只预请求以 `/products` 开头的 href 链接
selector: "a[href^='/products']",
}),
],
});

默认情况下,预请求脚本也会搜索页面中包含 rel="prefetch-intent" 属性的任何链接,例如:<a rel="prefetch-intent" />。在查找 prefetch-intent 链接时,可以在你的 astro.config.* 文件中更改此行为以使用自定义查询选择器。

astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';
export default defineConfig({
// ...
integrations: [
prefetch({
// 只预请求以 `/products` 或 `/coupons` 开头的 href 链接
intentSelector: ["a[href^='/products']", "a[href^='/coupons']"],
// 使用字符串预请求单个选择器
// intentSelector: "a[href^='/products']"
}),
],
});

默认情况下,预请求脚本一次只会预请求一个链接。你可以在 astro.config.* 文件中更改此行为,以增加并发下载的限制。

astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';
export default defineConfig({
// ...
integrations: [
prefetch({
// 允许同时预请求最多三个链接
throttle: 3,
}),
],
});
  • 如果你的安装似乎无法正常工作,请尝试重新启动开发服务器。
  • 如果链接似乎没有预请求,请确保链接指向同一域上的页面,并匹配集成的 selector 选项。

如需帮助,请查看 Discord 上的 #support 频道。我们友好的支持小组成员将在这里提供帮助!

你也可以查看我们的 Astro 集成文档,了解更多关于集成的信息。

这个项目由 Astro 的核心团队维护,欢迎你提交 issue 或 PR!

有关该集成的变化历史,请参阅 CHANGELOG.md

其他

UI 框架

SSR 适配器

其他