@astrojs/prefetch

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

什么是预请求？

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

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

安装

快速安装

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

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

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

手动安装

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

npm install @astrojs/prefetch

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

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 文件中，这是你的项目集成设置所在的位置。

config.selector

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

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

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

config.intentSelector

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

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']"
    }),
  ],
});

config.throttle

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

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // 允许同时预请求最多三个链接
      throttle: 3,
    }),
  ],
});