Fast dimension bindings using ResizeObserver.
Why? Svelte currently uses an iframe technique to measure dimensions so it works in older browsers. However, creating multiple iframes has a big performance impact and sometimes quirkiness. If your target browsers support ResizeObserver, this can significantly improve dimension binding performance.
npm install --save-dev svelte-fast-dimension// svelte.config.js
import { fastDimension } from 'svelte-fast-dimension'
export default {
preprocess: [fastDimension()]
}Use dimension bindings as usual, it will use ResizeObservers under-the-hood:
<script>
let a, b, c, d
</script>
<div
bind:clientWidth="{a}"
bind:clientHeight="{b}"
bind:offsetWidth="{c}"
bind:offsetHeight="{d}"
/>svelte-fast-dimension injects an import from svelte-fast-dimension/action when preprocessing. This won't be detected during Vite's prebundling phase, and will cause on-the-fly prebundling which slows startup time. To fix this, add svelte-fast-dimension/action to optimizeDeps.include.
MIT