Aller au contenu

@astrojs/ partytown

Cette intégration Astro active Partytown dans votre projet Astro.

Partytown est une bibliothèque lazy-loaded qui permet de relocaliser les scripts gourmands en ressources dans un web worker et hors du main thread.

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.

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.

Fenêtre de terminal
npx 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.

Tout d’abord, installez le paquet @astrojs/partytown :

Fenêtre de terminal
npm install @astrojs/partytown

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

astro.config.mjs
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';
export default defineConfig({
// ...
integrations: [partytown()],
});

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.

Pour configurer cette intégration, passez un objet ‘config’ à l’appel de la fonction partytown() dans astro.config.mjs.

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

Cela correspond à l’objet de configuration Partytown config object.

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.

astro.config.mjs
export default defineConfig({
// ...
integrations: [
partytown({
// Exemple : Désactiver le mode débogage.
config: { debug: false },
}),
],
});

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” des variables sur l’objet fenêtre global 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

astro.config.mjs
export default defineConfig({
// ...
integrations: [
partytown({
// Exemple : Ajouter dataLayer.push comme événement de transfert.
config: {
forward: ['dataLayer.push'],
},
}),
],
});

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations

Contribute

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Community