@astrojs/ partytown

v2.1.7 GitHub npm チェンジログ

このAstroインテグレーション (EN)は、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: {
        // options go here
      },
    }),
  ],
});

これはPartytown設定オブジェクトをミラーリングします。

config.debug

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

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

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を転送イベントとして追加する
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});