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.

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.

Terminal window
# 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.

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:

Terminal window
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 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.

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({
// Ejemplo: Desactivar el modo de depuración.
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"],
},
}),
],
});
  • Si estás obteniendo un error Failed to fetch, asegúrate de no estar utilizando ninguna extensión del navegador que esté bloqueando el script.

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra documentación de integración de Astro para obtener más información sobre las integraciones.

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

Consulta el CHANGELOG.md para un historial de cambios en esta integración.

Otros

Frameworks UI

Adaptadores SSR

Otros