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

默认情况下，预请求脚本会搜索页面上包含 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']",
    }),
  ],
});

默认情况下，预请求脚本也会搜索页面中包含 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']"
    }),
  ],
});

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

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。

更多集成