@astrojs/ partytown
Cette intégration Astro active Partytown dans votre projet Astro.
Pourquoi Astro Partytown
Section intitulée « Pourquoi Astro Partytown »Partytown est une bibliothèque à chargement différé qui permet de déplacer les scripts gourmands en ressources dans un web worker et hors du thread principal.
Si vous utilisez des scripts tiers à des fins d’analyse ou de publicité, Partytown est un excellent moyen de vous assurer qu’ils ne ralentissent pas votre site.
L’intégration Astro Partytown installe Partytown pour vous et s’assure qu’il est activé sur toutes vos pages.
Installation
Section intitulée « Installation »Astro inclut une commande astro add
pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.
Exécutez l’une des commandes suivantes dans une nouvelle fenêtre de terminal.
npx astro add partytown
pnpm astro add partytown
yarn astro add partytown
Si vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.
Installation manuelle
Section intitulée « Installation manuelle »Tout d’abord, installez le paquet @astrojs/partytown
:
npm install @astrojs/partytown
pnpm add @astrojs/partytown
yarn add @astrojs/partytown
Ensuite, appliquez l’intégration à votre fichier astro.config.*
en utilisant la propriété integrations
:
import { defineConfig } from 'astro/config';import partytown from '@astrojs/partytown';
export default defineConfig({ // ... integrations: [partytown()],});
Utilisation
Section intitulée « Utilisation »Partytown devrait être prêt à fonctionner sans aucune configuration. Si vous avez un script tiers existant sur votre site, essayez d’ajouter l’attribut type="text/partytown"
:
<script type="text/partytown" src="fancy-analytics.js"></script>
Si vous ouvrez l’onglet « Réseau » depuis les outils de développement de votre navigateur, vous devriez voir le proxy partytown
intercepter cette requête.
Configuration
Section intitulée « Configuration »Pour configurer cette intégration, passez un objet ‘config’ à l’appel de la fonction partytown()
dans astro.config.mjs
.
export default defineConfig({ // ... integrations: [ partytown({ config: { //les options vont ici }, }), ],});
Cela reflète l’objet de configuration Partytown.
config.debug
Section intitulée « config.debug »Partytown est livré avec un mode debug
; activez-le ou désactivez-le en passant true
ou false
à config.debug
. Si le mode debug
est activé, il produira des journaux détaillés dans la console du navigateur.
Si cette option n’est pas définie, le mode debug
sera activé par défaut en mode dev ou preview.
export default defineConfig({ // ... integrations: [ partytown({ // Exemple : Désactiver le mode débogage. config: { debug: false }, }), ],});
config.forward
Section intitulée « config.forward »Les scripts tiers ajoutent généralement des variables à l’objet window
afin que vous puissiez communiquer avec eux à travers votre site. Mais lorsqu’un script est chargé dans un web-worker, il n’a pas accès à l’objet global window
.
Pour résoudre ce problème, Partytown peut « patcher » les variables de l’objet de fenêtre globale et les transmettre au script approprié.
Vous pouvez spécifier les variables à transférer avec l’option config.forward
. Pour en savoir plus, consultez la documentation de Partytown.
export default defineConfig({ // ... integrations: [ partytown({ // Exemple : Ajouter dataLayer.push comme événement de transfert. config: { forward: ['dataLayer.push'], }, }), ],});
config.resolveUrl
Section intitulée « config.resolveUrl »Certains scripts tiers peuvent nécessiter un proxy (https://partytown.qwik.dev/proxying-requests/) via config.resolveUrl()
, exécuté dans le service worker. Vous pouvez configurer cette option pour rechercher une URL spécifique et éventuellement renvoyer une URL de proxy à la place :
export default defineConfig({ // ... integrations: [ partytown({ // Exemple : utiliser un proxy pour le script d'analyse de Facebook config: { resolveUrl: (url) => { const proxyMap = { "connect.facebook.net": "my-proxy.com" } url.hostname = proxyMap[url.hostname] || url.hostname; return url; }, } }), ],});
Cependant, étant donné que l’objet config
est sérialisé lorsqu’il est envoyé au client, certaines limitations sur les fonctions transmises à votre configuration s’appliquent :
- Les fonctions ne peuvent pas référencer quoi que ce soit en dehors de la portée de la fonction.
- Les fonctions ne peuvent être écrites qu’en JavaScript.
Dans certains cas d’utilisation avancés, vous devrez peut-être transmettre des données à cette fonction lors de l’initialisation de Partytown. Pour ce faire, vous pouvez définir resolveUrl()
dans window.partytown
au lieu de la configuration d’intégration :
---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; }, };`} />
Notez que la configuration de l’intégration remplacera window.partytown
si vous définissez une propriété dans les deux.
Exemples
Section intitulée « Exemples »- Parcourir les projets avec Astro Partytown sur GitHub pour plus d’exemples !
Ressources communautaires
Section intitulée « Ressources communautaires »- Implémentation de Google Tag Manager avec Partytown et Astro
- Optimiser Google Analytics avec Partytown dans Astro