@astrojs/ partytown
このAstroインテグレーションは、AstroプロジェクトでPartytownを有効にします。
Astro Partytownを選ぶ理由
Section titled “Astro Partytownを選ぶ理由”Partytownは、リソースを大量に消費するスクリプトをWeb Workerに再配置し、メインスレッドから解放するのに役立つ遅延読み込みライブラリです。
分析や広告などのためにサードパーティのスクリプトを使用している場合、Partytownはサイトの速度を低下させないようにするための優れた方法です。
Astro Partytownインテグレーションは、Partytownをインストールし、すべてのページで有効になっていることを確認します。
インストール
Section titled “インストール”Astroには、公式インテグレーションのセットアップを自動化するためのastro add
コマンドが含まれています。もしよろしければ、[手動でインテグレーションをインストールする](#手動インストールこともできます。
新しいターミナルウィンドウで次のいずれかのコマンドを実行します。
npx astro add partytown
pnpm astro add partytown
yarn astro add partytown
問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。
手動インストール
Section titled “手動インストール”まず、@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
Section titled “config.debug”Partytownにはdebug
モードが付属しています。config.debug
にtrue
またはfalse
を渡すことで有効または無効にできます。debug
モードが有効になっている場合、詳細なログがブラウザコンソールに出力されます。
このオプションが設定されていない場合、debug
モードはdevまたはpreviewモードでデフォルトでオンになります。
export default defineConfig({ // ... integrations: [ partytown({ // 例:デバッグモードを無効にする config: { debug: false }, }), ],});
config.forward
Section titled “config.forward”サードパーティのスクリプトは通常、window
オブジェクトに変数を追加して、サイト全体でそれらと通信できるようにします。しかし、スクリプトがWeb Workerで読み込まれると、そのグローバルなwindow
オブジェクトにアクセスできなくなります。
これを解決するために、Partytownは変数をグローバルwindow
オブジェクトに「パッチ」して、適切なスクリプトに転送できます。
config.forward
オプションを使用して、転送する変数を指定できます。Partytownのドキュメントで詳細を読む。
export default defineConfig({ // ... integrations: [ partytown({ // 例:dataLayer.pushを転送イベントとして追加する config: { forward: ['dataLayer.push'], }, }), ],});
- GitHubでAstro Partytownを使用したプロジェクトを閲覧するでその他の例をご覧ください!