-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Describe the bug
My site outputs something like this:
var picture_1 = $.child(a_2);
var source_3 = $.child(picture_1);
var source_4 = $.sibling(source_3);
var source_5 = $.sibling(source_4);
var img_2 = $.sibling(source_5);
After being built with @sveltejs/adapter-netlify, it is transformed to:
var picture_1 = child(a_1);
var source_3 = child(picture_1);
var source_4 = sibling(source_3);
var source_5 = sibling(source_4);
sibling(source_5);
There's multiple problems here. The first is that this DOM walking code is inefficient. E.g. these lines:
var source_4 = $.sibling(source_3);
var source_5 = $.sibling(source_4);
var img_2 = $.sibling(source_5);
Could be replaced with the method that gets the third sibling:
var img_2 = $.sibling(source_3, 3);
The second is that Rollup (and maybe esbuild after that?) isn't removing the unused code. It removes img_2 as an unused variable, but leaves the whole chain of unused DOM creation code loading up to that point. Perhaps we haven't properly marked $.sibling as being pure or maybe there's some rollup bug here? Of course another alternative to fixing this would be to avoid creating it in the first place.
There's about a hundred instances of this on my page, so it's responsible for a pretty large portion of the output.
Reproduction
Logs
No response
System Info
svelte: ^5.1.13 => 5.1.13Severity
annoyance