Using the `immutable` Compiler Option
<svelte:options immutable> is a performance optimization you can add to your Svelte components.
There is no difference in compiled output size, but re-rendering mutable variables will be faster.
The official docs are here and official example is here. The example demonstrates a compelling case to use the immutable flag when possible, because it significantly optimizes child components in a list. This is likely one of the most common performance gotchas.
The parent component can opt into mutability, and use mutable data structures like maps, without de-optimizing all of its children.
- Mutations in Svelte are compiled to an
$$invalidatefunction in the compiled output.
- The default option,
immutable: false, will always treat calls to
$$invalidatewith mutable variables to always be true. In other words, it will always rerender, to ensure correctness in case the variable was modified.
trueopts out of this and relies on simple equality:
a !== b.
You can see the difference between
not_equal in the source code here.
This is the only place in Svelte affected by the
immutable compiler option.