Feature request: Render preload tag in head for an image via the import statement

[Matthijs Knigge]

Hi there,

I just wanted to suggest a new feature for the plugin. I came across the following code in svelte:

<script>
    import macbook from '../media/macbook.png?w=1600;1200;600;300&webp&srcset';
</script>
<svelte:head>
    <link rel="preload" as="image" imagesrcset="{macbook}" imagesizes="50vw">
</svelte:head>

It would be really helpful if the preload tag could be added through the import statement, like this:
import macbook from '../media/macbook.png?w=1600;1200;600;300&webp&srcset&**preload**';
I think this feature would be useful because it would make it easier to preload assets in the head of the document, which can improve the performance of the page by reducing the amount of time it takes to load resources.

I would appreciate it if you could consider adding this feature to the plugin. Let me know if you have any questions or if there's anything else I can provide to help with this request.

[Ben McCann]

This wouldn't be handled by the plugin, but by the web framework. E.g. see SvelteKit's preload option: https://kit.svelte.dev/docs/hooks#server-hooks-handle

[Matthijs Knigge]

@benmccann I'm already handling it with the web framework via svelte:head. The proposal I have is to add as parameter to the import URL to make it easier.

This would also make it easier to use in other web frameworks.

However, the argument you are making is that it is outside the scope of this plugin to add HTML in the final output?

[Ben McCann]

I don't think Vite plugins can add HTML. It's less that it's outside the scope and more that it's technically impossible

[Matthijs Knigge]

Ah yeah your right, that only will work if there are static html files in the build