@astrojs/预告####
为什么是预言?
页面负荷时间在网站的可用性和总体享受方面起很大作用. 这种整合通过在屏幕上可见的页面链接预取功能,为您的多页应用程序(MPA)带来了近即时页面导航的好处.
为了进一步改善经验,特别是在相类似的页面上的经验,样式表也和HTML一起被预选. 在静态站点的标签之间导航时,这尤其有用,因为大部分页面的内容和样式不会改变.
安装
快速安装
这个 astro add 命令行工具为您实现安装自动化。 在新的终端窗口中运行以下命令之一 。 (如果你不确定您使用的是哪个软件包管理器, 请运行第一个命令 。) 然后,按提示键,并在终端输入"y"(意为"是"),每个字.
# Using NPM
npx astro add prefetch
# Using Yarn
yarn astro add prefetch
# Using PNPM
pnpm astro add prefetch
如果你遇到任何问题, 你可以在GitHub上向我们报告 并尝试下面的人工安装步骤.
手动安装
首先,安装 @astrojs/prefetch 使用您的软件包管理器的软件包。 如果你用npm或不确定, 在终端运行这个:
npm install @astrojs/prefetch
然后,把这个整合到您的 astro.config.* 使用 integrations 属性 :
// 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.* 用于查找预切链接时使用自定义查询选择器的文件.
// 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.* 文件用于查找预提示链接时使用自定义查询选择器.
// 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.* 用于增加同时下载限制的文件.
// 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 频道打开 解析器我们友好的支援队成员来帮忙!
你也可以检查我们 Astro 集成文档 更多关于融合.
捐款
这个包由Astro的核心团队维护. 欢迎你提交一个问题或公关!
更改日志
见 变动情况 以了解这种融合的变化历史.