Reprise : téléchargement paresseux
Avec { lazy: true }, le bundle d'un îlot n'est pas téléchargé au chargement de la page. Un loader global (~quelques lignes) attend la première interaction, récupère le bundle (~1,5 Ko) plus le runtime partagé (~3,5 Ko, une seule fois), reprend l'état et rejoue l'événement. Idéal quand une page a de nombreux widgets : on ne paie que pour ceux que le visiteur utilise vraiment.
Astuce
Ouvrez l'onglet Réseau et rechargez : RIEN sous /islands/ ne se charge. Interagissez avec un widget (clic, saisie, sélection) — seul SON bundle apparaît, plus le runtime partagé au premier coup. Les cinq îlots ci-dessous sont paresseux et de types d'événements différents (clic, input, change).
Cinq îlots paresseux (clic · saisie · sélection)
Compteur (clic)
Vote (clic)
7
J'aime (clic)
42 likes
Saisie (input)
→ you typed: “”
Taille (change)
→ medium · $12
// Add { lazy: true } and the island's bundle is NOT downloaded on load.
// A tiny global loader watches for the first interaction (pointerdown
// preloads; click / input / change replay), fetches the ~1.5KB bundle +
// the shared 3.5KB runtime once, resumes, then replays the event.
resumableIsland("Vote", Vote, { start: 7 }, { lazy: true })
resumableIsland("Select", Select, {}, { lazy: true })
// 5 interactive islands on this page → 0 bytes of island JS on load.
// You pay ~1.5KB only for the widgets a visitor actually touches.