Slow Performance with Svelte 5

[SaintPepsi]

Describe the bug

When SVG elements are rendered to the page it causes a big performance slow down.

Parsing the HTML happens instantly, but then there is a presentation delay of over 500 ms

Reproduction

https://github.com/SaintPepsi/unplugin-icons-performance-issue-minimal-reproduction

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 107.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.2 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 10.6.0 - /opt/homebrew/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.91
    Safari: 17.4.1

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[userquin]

how can we test your repro? on my local I cannot see any performance slow down when loading the page.

Is it about running dev server or build + preview?

[SaintPepsi]

it seems to happen when running it in a mobile browser, like on chrome on android for example.

[userquin]

Can you try using passive modifier on click handler?.

Can you show performance details centered in 4s?

Can you check if lodash-es being tree shaked?

I always use the subpackage module, for example import sample from 'lodash-es/sample' instead loading from lodash-es barrel? I also include the subpackage in vite optimizedDeps.include array.

In dev or deployed app (build)?

[SaintPepsi]

Can you try using passive modifier on click handler?.

How do you do that?

Can you show performance details centered in 4s?

I'm not sure what you mean? Do you mean for me to screenshot the performance details for 4 seconds?

I always use the subpackage module, for example import sample from 'lodash-es/sample'

Does that make it faster?

In dev or deployed app (build)?

Both

---

I should be able to get to these tonight or tomorrow, will update here when I have more info

[userquin]

Does that make it faster?

It should, at least in dev server, check network tab (maybe the 600ms is about loading lodash-es barrel), I Will ckeck it tmr.

[userquin]

@SaintPepsi we've released v0.19.0 with Svelte 5 Runnes compiler, I'm going to check the performance on my mobile phone (Android 14)

[userquin]

About the lodash-es barrel, using your import in dev server lodash-es barrel chunk 256KB, using subpackage import + optimizedDeps.include ~12.5KB.

The passive event modifier is configured by Svelte 5 internally when safe.

[userquin]

Adding 25/100 children in the click handler is not cheap using any framework or even using VanillaJS, the problem seems not to be related to this repository, rather it seems like a problem with the logic in your reproduction.

[SaintPepsi]

@userquin I think you're right, I also posted it in svelte, also with a react example except it's not happening in react. I'll try out v0.19.0 as well thanks

[SaintPepsi]

It seems faster from > 500ms to 136ms/230ms:

[fedorovvvv]

@userquin Could this be related to {@html... ? https://github.com/unplugin/unplugin-icons/pull/400#issuecomment-2764292590

Perhaps svelte needs additional rsources to translate the svg string into a dom element

[userquin]

@userquin Could this be related to {@html... ? #400 (comment)

Perhaps svelte needs additional rsources to translate the svg string into a dom element

I'm not an Svelte expert, maybe you should ask this in Svelte repo, the integration here was done with a Svelte core team (Dominik).

[fedorovvvv]

@userquin I created a discussion in svelte repo https://github.com/sveltejs/svelte/discussions/15639

UPD: The problem is solved in unplugin-icons for svelte 5+ since it does not use @html