@astrojs/partytown

此 Astro 集成 允许你在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 配置对象 相对应。

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

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

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

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

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

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

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

• 在 GitHub 上浏览使用 Astro Partytown 的项目 来获取更多例子!

• 如果遇到 Failed to fetch 错误，请确保没有使用任何浏览器扩展来屏蔽该脚本。

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

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

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

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

更多集成