Fast dimension bindings using ResizeObserver
MIT License
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