@astrojs/ partytown

v2.0.2 GitHub npm Changelog

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

为什么是 Astro Partytown

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

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

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

安装

快速安装

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

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

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

手动安装

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

npm install @astrojs/partytown

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

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() 函数调用。

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

这与 Partytown 配置对象相对应。

config.debug

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

如果不设置此选项，在 dev 或 preview 模式下，debug 模式默认启用。

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

config.forward

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

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

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

export default defineConfig({
  integrations: [
    partytown({
      // 示例：将 dataLayer.push 作为 forwarding-event 添加。
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});