@astrojs/ partytown

Esta integración de Astro permite Partytown en tu proyecto de Astro.

¿Por qué Partytown?

Partytown es una biblioteca cargada de forma diferida para ayudar a trasladar scripts intensivos en recursos a un web worker, y fuera del hilo principal.

Si estás utilizando scripts de terceros para cosas como análisis o anuncios, Partytown es una excelente manera de asegurarte de que no ralenticen tu sitio.

La integración de Astro Partytown instala Partytown por ti y se asegura de que esté habilitado en todas tus páginas.

Instalación

Instalación rápida

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Ejecuta uno de los siguientes comandos en una nueva ventana terminal.

npx astro add partytown

pnpm astro add partytown

yarn astro add partytown

Si tienes algún problema, no dudes en informarnos en GitHub y prueba los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/partytown:

npm install @astrojs/partytown

pnpm add @astrojs/partytown

yarn add @astrojs/partytown

Luego, aplica esta integración a tu archivo astro.config.* usando la propiedad integrations:

import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  // ...
  integrations: [partytown()],
});

Uso

Partytown debería estar listo para funcionar sin configuración alguna. Si tienes un script de terceros existente en tu sitio, intenta agregar el atributo type="text/partytown":

<script type="text/partytown" src="fancy-analytics.js"></script>

Si abres la pestaña “Red” de las herramientas de desarrollador, de tu navegador, deberías ver el proxy partytown interceptando esta solicitud.

Configuración

Para configurar esta integración, pase un objeto ‘config’ a la llamada de función partytown() en astro.config.mjs.

export default defineConfig({
  // ..
  integrations: [
    partytown({
      config: {
        // opciones van aquí
      },
    }),
  ],
});

Esto refleja el objeto de configuración de Partytown.

config.debug

Partytown viene con un modo de debug; actívalo o desactívalo pasando true o false a config.debug. Si se habilita el modo de debug se imprimirán registros detallados en la consola del navegador.

Si esta opción no se establece, el modo debug estará activado de forma predeterminada en el modo dev o preview.

export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Example: Disable debug mode.
      config: { debug: false },
    }),
  ],
});

config.forward

Los scripts de terceros suelen agregar variables al objeto window para que puedas comunicarte con ellos en todo tu sitio. Pero cuando un script se carga en un web worker no tiene acceso a ese objeto window global.

Para solucionar esto, Partytown puede “parchar” las variables al objeto global de ventana y reenviarlos al script correspondiente.

Puedes especificar qué variables enviar hacia adelante con la opción config.forward. Lee más en la documentación de Partytown.

export default defineConfig ({
  // ...
  integrations: [
    partytown({
      // Ejemplo: Agregar dataLayer.push como un evento de reenvío.
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
});