svelte
svelte copied to clipboard
sveltejs
Conditionally empty svelte:head sends comment strings
Describe the bug
I have an "Image" component that conditionally uses <svelte:head> like that:
<svelte:head>
{#if preload}
<link
as="image"
rel="preload"
fetchpriority="high"
imagesizes={sizes}
imagesrcset={srcset(src, widths, quality)}
/>
{/if}
</svelte:head>
When preload is not passed as true, <svelte:head> is effectively empty, but it still results in <head> comments like:
<!-- HEAD_svelte-rkfde2_START -->
<!-- HEAD_svelte-rkfde2_END -->
<!-- HEAD_svelte-rkfde2_START -->
<!-- HEAD_svelte-rkfde2_END -->
<!-- HEAD_svelte-rkfde2_START -->
<!-- HEAD_svelte-rkfde2_END -->
<!-- HEAD_svelte-rkfde2_START -->
<!-- HEAD_svelte-rkfde2_END -->
<!-- HEAD_svelte-rkfde2_START -->
<!-- HEAD_svelte-rkfde2_END -->
<!-- HEAD_svelte-12xen0e_START -->
<!-- HEAD_svelte-12xen0e_END -->
I'm wondering if sending these unnecessary strings in production is the desired behavior?
To solve this now, I think I will make a secondary "ImagePreloaded" component, but this is may be kind of ugly when I'm using the components in a loop.
Reproduction
Make a component that has code along the lines of:
<svelte:head>
{#if title}
<title>{title}</title>
{/if}
</svelte:head>
View-source of a page that uses the element multiple times without passing, for example, the title prop and look for multiple HTML comments in <head>.
Logs
No response
System Info
[email protected]
@sveltejs/[email protected]
Severity
annoyance
Additional Information
Not good to send unnecessary comment string lines with every request.
Curious about this too, seeing them in my markup, would rather they not be there.
