@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

La herramienta de línea de comandos astro add automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué gestor de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las instrucciones y escribe “y” en la terminal (es decir, “sí”) para cada uno.

# Usando NPM
npx astro add partytown
# Usando Yarn
yarn astro add partytown
# Usando PNPM
pnpm 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/partytownusando tu gestor de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

npm install @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 src="fancy-analytics.js"></script>
<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({
      // Ejemplo: Desactivar el modo de depuración.
      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"],
      },
    }),
  ],
});