跳转到内容

@astrojs/ partytown

Astro 集成 允许你在 Astro 项目中启用 Partytown

为什么是 Astro Partytown

段落标题 为什么是 Astro Partytown

Partytown 是一个延迟加载的库,可以帮助将资源密集型脚本转移到 web worker 中,并且从 主线程 中移除。

如果你使用第三方脚本进行分析或广告等操作,Partytown 是确保它们不会减慢网站速度的绝佳方法。

Astro Partytown 集成会为你安装 Partytown 并确保它在所有页面上启用。

astro add 命令行工具为你自动进行安装。在一个新的终端窗口中运行下列其中一条命令(如果你不确定你使用的是哪个包管理器,请运行第一个命令)。然后按照提示,在终端中输入“y”(意思是“是”),每一条都是如此。

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

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

首先,使用你的包管理器安装 @astrojs/partytown 包。如果你使用的是 npm 或者不确定哪个包管理器,在终端运行下方命令:

Terminal window
npm install @astrojs/partytown

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

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

Partytown 应该可以零配置使用。如果你网站上已经有现成的第三方脚本,试试添加 type="text/partytown" 属性:

<script src="fancy-analytics.js"></script>
<script type="text/partytown" src="fancy-analytics.js"></script>

如果你打开 浏览器开发者工具 的“网络 Network”标签,你应该可以看到 partytown 代理拦截了这个请求。

要配置此集成,请将一个 ‘config’ 对象传递给 astro.config.mjs 中的 partytown() 函数调用。

astro.config.mjs
// ...
export default defineConfig({
integrations: [
partytown({
config: {
// 配置项在这
},
}),
],
});

这与 Partytown 配置对象 相对应。

Partytown 自带一个 debug 模式;通过向 config.debug 传入 truefalse 来启用或禁用它。如果启用了debug 模式,它会向浏览器控制台输出详细的日志。

如果不设置此选项,在 devpreview 模式下,debug 模式默认启用。

astro.config.mjs
export default defineConfig({
integrations: [
partytown({
// 示例:禁用调试模式。
config: { debug: false },
}),
],
});

第三方脚本通常会向 window 对象添加变量,以便你可以在整个站点与它们通信。但是当一个脚本在 web worker 中加载时,它无法访问全局的 window 对象。

为了解决这个问题,Partytown 可以“打补丁”变量到全局 window 对象并将它们转发到适当的脚本。

你可以使用 config.forward 选项指定要转发的变量。在 Partytown 的文档中了解更多信息。

astro.config.mjs
export default defineConfig({
integrations: [
partytown({
// 示例:将 dataLayer.push 作为 forwarding-event 添加。
config: {
forward: ['dataLayer.push'],
},
}),
],
});
  • 如果遇到 Failed to fetch 错误,请确保没有使用任何浏览器扩展来屏蔽该脚本。

需要帮助,请查看 Discord 上的 #support 频道。我们友好的支持小组成员随时准备提供帮助!

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

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

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

More integrations

UI 框架

SSR 适配器

其他