Partytown (scripts tiers dans un worker)

Les scripts tiers lourds (analytics, gestionnaires de tags) marqués type="text/partytown" sont déplacés vers un web worker ; leurs accès au DOM sont relayés vers le thread principal par un service worker. Le thread principal reste libre (meilleur TTI), et les autorisations inline disparaissent de votre CSP. Vraie bibliothèque Partytown (Builder.io) intégrée, servie depuis /~partytown/.

Astuce

La boîte ci-dessous démarre côté « thread principal », puis le script du worker remplace son texte — preuve que le code s'est exécuté hors du thread principal et que l'écriture DOM a été relayée. Nécessite un service worker (mode par défaut) ou l'isolation cross-origin (mode atomics).

Démo en direct

(en attente — devrait être remplacé par le worker)

Source

src/app/examples/partytown/page.tsxTSX

import { Partytown, partytownScript } from "@bext-stack/framework";

// render once, before any partytown script:
<Partytown forward={["dataLayer.push"]} />

// a heavy third-party script, relocated to a worker by Partytown:
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({ event: 'partytown_demo' });
  document.getElementById('pt-status').textContent = '…';
</script>