コンテンツにスキップ

@astrojs/ partytown

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

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

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

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

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

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

ターミナルウィンドウ
npx astro add partytown

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

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

ターミナルウィンドウ
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 type="text/partytown" src="fancy-analytics.js"></script>

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

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

astro.config.mjs
export default defineConfig({
// ...
integrations: [
partytown({
config: {
// options go here
},
}),
],
});

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

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

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

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

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

貢献する コミュニティ スポンサー