# @astrojs/prefetch 中文文档

规范地址：https://npmcn.com/package/%40astrojs/prefetch/

版本：0\.4\.1
npm 元数据更新时间：2025-09-18T17:34:32.939Z
中文译文更新时间：2026-11-07T01:11:32.398Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40astrojs/prefetch
原文对照：https://npmcn.com/package/%40astrojs/prefetch/?lang=original
项目主页：https://docs.astro.build/en/guides/integrations-guide/prefetch/
源码仓库：https://github.com/withastro/astro

弃用说明：@astrojs/prefetch is deprecated in favor of the builtin prefetch option\. Please see the migration guide for more information: https://docs\.astro\.build/en/guides/prefetch/\#migrating-from-astrojsprefetch

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：15.4 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2022-06-28T15:16:06.563Z
- 最新版本发布：2023-10-05T10:31:10.704Z
- 近 30 天下载量：7730（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 0 个）

## 中文简介

在您的 Astro 站点中预选页面导航

## 安装

```sh
npm install @astrojs/prefetch
```

也可以使用：`pnpm add @astrojs/prefetch`、`yarn add @astrojs/prefetch`、`bun add @astrojs/prefetch`

## README

# @astrojs/预告####

-   **[为什么是预言?](https://npmcn.com/package/%40astrojs/prefetch/#readme-why-prefetch)**
-   **[安装](https://npmcn.com/package/%40astrojs/prefetch/#readme-installation)**
-   **[使用量](https://npmcn.com/package/%40astrojs/prefetch/#readme-usage)**
-   **[配置](https://npmcn.com/package/%40astrojs/prefetch/#readme-configuration)**
-   **[解决问题](https://npmcn.com/package/%40astrojs/prefetch/#readme-troubleshooting)**
-   **[捐款](https://npmcn.com/package/%40astrojs/prefetch/#readme-contributing)**
-   **[更改日志](https://npmcn.com/package/%40astrojs/prefetch/#readme-changelog)**

## 为什么是预言?

页面负荷时间在网站的可用性和总体享受方面起很大作用. 这种整合通过在屏幕上可见的页面链接预取功能,为您的多页应用程序(MPA)带来了近即时页面导航的好处.

为了进一步改善经验,特别是在相类似的页面上的经验,样式表也和HTML一起被预选. 在静态站点的标签之间导航时,这尤其有用,因为大部分页面的内容和样式不会改变.

## 安装

### 快速安装

这个 `astro add` 命令行工具为您实现安装自动化。 在新的终端窗口中运行以下命令之一 。 (如果你不确定您使用的是哪个软件包管理器, 请运行第一个命令 。) 然后,按提示键,并在终端输入"y"(意为"是"),每个字.

```sh
# Using NPM
npx astro add prefetch
# Using Yarn
yarn astro add prefetch
# Using PNPM
pnpm astro add prefetch
```

如果你遇到任何问题, [你可以在GitHub上向我们报告](https://github.com/withastro/astro/issues) 并尝试下面的人工安装步骤.

### 手动安装

首先,安装 `@astrojs/prefetch` 使用您的软件包管理器的软件包。 如果你用npm或不确定, 在终端运行这个:

```sh
npm install @astrojs/prefetch
```

然后,把这个整合到您的 `astro.config.*` 使用 `integrations` 属性 :

```diff
  // astro.config.mjs
  import { defineConfig } from 'astro/config';
+ import prefetch from '@astrojs/prefetch';

  export default defineConfig({
    // ...
    integrations: [prefetch()],
    //             ^^^^^^^^^^
  });
```

## 使用量

当安装集成时,预选脚本会被自动添加到项目的每一页. 刚刚添加 `rel="prefetch"` 对任意 `<a />` 链接在你的页面 你准备去!

此外,还可以添加 `rel="prefetch-intent"` 对任意 `<a />` 链接到您的页面上, 只有在它们被盘旋、被触摸或被聚焦时, 才会预设它们 。 在查看您的网站时, 这对保存数据使用特别有用 .

## 配置

Astro Prefetch 集成处理器在站点上链接的是先发制人,它有自己的选项. 更改这些在 `astro.config.mjs` 文件是您工程的集成设置所在.

### 配置. 选择器

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

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Only prefetch links with an href that begins with `/products`
      selector: "a[href^='/products']",
    }),
  ],
});
```

### 配置.intent 选择器

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

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Only prefetch links with an href that begins with `/products` or `/coupons`
      intentSelector: ["a[href^='/products']", "a[href^='/coupons']"],

      // Use a string to prefetch a single selector
      // intentSelector: "a[href^='/products']"
    }),
  ],
});
```

### 配置.throtttle

默认情况下,预选脚本一次只能预选一个链接. 你的行为可以改变 `astro.config.*` 用于增加同时下载限制的文件.

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Allow up to three links to be prefetched concurrently
      throttle: 3,
    }),
  ],
});
```

## 解决问题

-   如果您的安装似乎不起作用, 请尝试重新启动 dev 服务器 .
-   如果一个链接似乎不是先入为主,请确保链接指向同一域上的一页,并与集成匹配 `selector` 选项.

帮我看看 `#support` 频道打开 [解析器](https://astro.build/chat)我们友好的支援队成员来帮忙!

你也可以检查我们 [Astro 集成文档](https://docs.astro.build/en/guides/integrations-guide/) 更多关于融合.

## 捐款

这个包由Astro的核心团队维护. 欢迎你提交一个问题或公关!

## 更改日志

见 [变动情况](https://npmcn.com/package/%40astrojs/prefetch/CHANGELOG.md) 以了解这种融合的变化历史.

## 常见问题

### @astrojs/prefetch 是什么？

在您的 Astro 站点中预选页面导航注意：该包已被作者标记为弃用——@astrojs/prefetch is deprecated in favor of the builtin prefetch option\. Please see the migration guide for more information: https://docs\.astro\.build/en/guides/prefetch/\#migrating-from-astrojsprefetch

### 如何安装 @astrojs/prefetch？

在项目目录运行 npm install @astrojs/prefetch，或使用 pnpm add / yarn add / bun add。

### @astrojs/prefetch 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @astrojs/prefetch 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @astrojs/prefetch 可以商用吗？

@astrojs/prefetch 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @astrojs/prefetch 的下载量有多少？

根据 npm 官方下载统计，@astrojs/prefetch 在 2026/10/07 – 2026/11/05 这 30 天内被下载 7,730 次，日均约 258 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @astrojs/prefetch 还在维护吗？

最新版本 0\.4\.1 发布于 2023/10/05（3 年前）；至今共发布 31 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/28。作者已将其标记为弃用，新项目建议寻找替代方案。