README
svelte-fast-dimension
Fast dimension bindings using ResizeObservers.
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.
Installation
npm install --save-dev svelte-fast-dimension
Usage
// 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}"
/>
Recipes
Using with svelte-preprocess
Due to how Svelte applies preprocessors, using this with svelte-preprocess needs a bit more work to make sure we run this preprocessor only after svelte-preprocess finishes. There's an RFC to make this process clearer soon.
At the meantime, you can try one of these libraries:
Vite
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 remedy this, add svelte-fast-dimension/action to optimizeDeps.include.