How to add "preload" to remote resource in Vite

[dddssw]

Such as, an image

[agammann]

Add a standard image preload in the <head> of Vite's index.html:

<link rel="preload" as="image" href="https://example.com/hero.png">

Use the same URL as the eventual <img src="…">. Vite 8.3.3 kept that remote preload link in the production HTML when I built a small test project, so no Vite plugin is needed for this case. The browser then decides when to fetch it; preload is most useful for an image you know this page will show soon. See MDN's preload guide.

[Icaro0310]

Remote URLs bypass Vite's pipeline completely, so there's nothing to configure. Add the tag to index.html yourself:

<link rel="preload" as="image" href="https://cdn.example.com/hero.png">

The as attribute matters, the browser dedupes preloads on it. For responsive images use imagesrcset and imagesizes instead of href, and add crossorigin if the resource is fetched with CORS (fonts always need it).

If the URL is only known at build time, a five-line plugin with the transformIndexHtml hook can inject the same tag into head programmatically.

—
More of my work lives here: github.com/Icaro0310 · Website: icaro0310.github.io