javascript / expert
Snippet
Benutzerdefinierte Intersection-Hydrierungsstrategie
Unter Verwendung der benutzerdefinierten Hydrierungs-Hooks von Vue 3.5+ verzögert dieses Snippet die Hydrierung einer schweren Komponente, bis sie in den Viewport gelangt. Dies reduziert die Total Blocking Time (TBT) drastisch, indem unnötige JavaScript-Ausführung für nicht sichtbare Elemente vermieden wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
const LazyChart = defineAsyncComponent({loader: () => import('./HeavyChart.vue'),hydrate: (hydrate, { element }) => {const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {hydrate();observer.disconnect();}});observer.observe(element);}});
vue
Erklärung
1
hydrate: (hydrate, { element }) => {
Ein Low-Level-Hook, der die vollständige Kontrolle darüber gibt, wann der clientseitige Hydrierungsprozess beginnt.
2
observer.observe(element);
Beginnt mit der Überwachung des Platzhalter-Elements der Komponente auf Sichtbarkeitsänderungen.