@astrojs/ partytown

v2.1.8 GitHub npm チェンジログ

このAstroインテグレーションは、AstroプロジェクトでPartytownを有効にします。

Astro Partytownを選ぶ理由

Partytownは、リソースを大量に消費するスクリプトをWeb Workerに再配置し、メインスレッドから解放するのに役立つ遅延読み込みライブラリです。

分析や広告などのためにサードパーティのスクリプトを使用している場合、Partytownはサイトの速度を低下させないようにするための優れた方法です。

Astro Partytownインテグレーションは、Partytownをインストールし、すべてのページで有効になっていることを確認します。

インストール

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。

新しいターミナルウィンドウで次のいずれかのコマンドを実行します。

npx astro add partytown

pnpm astro add partytown

yarn astro add partytown

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

手動インストール

まず、@astrojs/partytownパッケージをインストールします。

npm install @astrojs/partytown

pnpm add @astrojs/partytown

yarn add @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 type="text/partytown" src="fancy-analytics.js"></script>

ブラウザの開発者ツールから「ネットワーク」タブを開くと、partytownプロキシがこのリクエストをインターセプトしているのがわかるはずです。

設定

このインテグレーションを設定するには、astro.config.mjsのpartytown()関数呼び出しに「config」オブジェクトを渡します。

export default defineConfig({
  // ...
  integrations: [
    partytown({
      config: {
        // ここにオプションを設定します
      },
    }),
  ],
});

このオブジェクトは、Partytown設定オブジェクトを模倣しており、すべてのオプションをpartytown.configで設定できます。Astroプロジェクトの一般的な設定オプションについては、このページで説明します。

デバッグモードを有効にする

Partytownにはdebugモードが付属しています。config.debugにtrueまたはfalseを渡すことで有効または無効にできます。debugモードが有効になっている場合、詳細なログがブラウザコンソールに出力されます。

このオプションが設定されていない場合、debugモードはdev (EN)またはpreview (EN)モードでデフォルトでオンになります。

export default defineConfig({
  // ...
  integrations: [
    partytown({
      // 例：デバッグモードを無効にする
      config: { debug: false },
    }),
  ],
});

変数を転送する

サードパーティのスクリプトは通常、windowオブジェクトに変数を追加して、サイト全体でそれらと通信できるようにします。しかし、スクリプトがWeb Workerで読み込まれると、そのグローバルなwindowオブジェクトにアクセスできなくなります。

これを解決するために、Partytownは変数をグローバルwindowオブジェクトに「パッチ」して、適切なスクリプトに転送できます。

config.forwardオプションを使用して、転送する変数を指定できます。Partytownのドキュメントで詳細を読む。

export default defineConfig({
  // ...
  integrations: [
    partytown({
      // 例：dataLayer.pushを転送イベントとして追加する
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});

リクエストをプロキシする

サードパーティスクリプトの中には、サービスワーカー内で実行されるconfig.resolveUrl()を介してプロキシする必要があるものがあります。このオプションを設定することで、特定のURLをチェックし、必要に応じてプロキシされたURLを返すことができます。

import { defineConfig } from 'astro/config';
import partytown from "@astrojs/partytown";

export default defineConfig({
  // ...
  integrations: [
    partytown({
      // 例: Facebookの分析スクリプトをプロキシします
      config: {
        resolveUrl: (url) => {
          const proxyMap = new Map([["connect.facebook.net", "my-proxy.com"]]);
          const proxiedHost = proxyMap.get(url.hostname);
          if (proxiedHost) url.hostname = proxiedHost;
          return url;
        },
      },
    }),
  ],
});

ただし、configオブジェクトはクライアントに送信される際にシリアル化されるため、設定に渡される関数にはいくつかの制限が適用されます。

関数のスコープ外にあるものを参照できません。
JavaScriptでのみ記述できます。

一部の高度な利用シーンでは、Partytownを初期化する際にこの関数にデータを渡す必要がある場合があります。その場合は、インテグレーション設定ではなく、window.partytownのresolveUrl()で設定できます。

---
const proxyMap = {
  "connect.facebook.net": "my-proxy.com"
};
---

<script is:inline set:html={`
  window.partytown = {
    resolveUrl: (url) => {
      const proxyMap = ${JSON.stringify(proxyMap)};
      url.hostname = proxyMap[url.hostname] || url.hostname;
      return url;
    },
  };
`} />