javascript / expert
Snippet
Opt-out der Reaktivität mit Object.freeze
Die Proxy-basierte Reaktivität von Svelte überwacht Objekte rekursiv. Bei massiven schreibgeschützten Datensätzen kann dieser Prozess extrem teuer sein. Object.freeze signalisiert Svelte, dass die Daten unveränderlich sind, wodurch die Proxy-Erstellung umgangen und erheblich CPU und Speicher gespart wird.
snippet.js
1
2
3
4
5
6
7
const rawData = await fetch('/api/large-dataset').then(r => r.json());// Prevent Svelte from recursively making this array reactiveconst dataset = $state({items: Object.freeze(rawData.map(Object.freeze)),selectedId: null});
svelte
Erklärung
1
Object.freeze(rawData.map(Object.freeze))
Friert sowohl das Array als auch seine einzelnen Elemente ein, um absolute Unveränderlichkeit und Null Reaktivitäts-Overhead zu gewährleisten.
2
$state({ ... })
Nur die Eigenschaften des Objekts auf oberster Ebene bleiben reaktiv, während die eingefrorenen Elemente als statische Werte behandelt werden.