Saltearse al contenido

@astrojs/ partytown

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

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.

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.

Ventana de terminal
npx 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.

Primero, instala el paquete @astrojs/partytown:

Ventana de terminal
npm install @astrojs/partytown

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

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

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.

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

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

Esto refleja el objeto de configuración de Partytown.

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.

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

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.

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

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones

Contribuir

¿Qué tienes en mente?

Comunidad