vite-plugin-preload-assets
Advanced tools
Optimizes performance by automatically injecting preload and preconnect tags for critical resources with Vite (JS, CSS, fonts, images).
EN | FR
vite-plugin-preload-assets is a Vite plugin designed to improve performance by automatically injecting <link rel="preload"> and <link rel="preconnect"> tags for critical resources (images, fonts, JS, and CSS) at build time.
data-preloadlogo-dark.png)fontsToPreload)<link rel="preconnect"> tags for Google Fonts (fonts.googleapis.com, fonts.gstatic.com)npm install vite-plugin-preload-assets --save-dev
In the vite.config.ts, vite.config.js, or vite.config.mjs file:
import preloadAssetsPlugin from 'vite-plugin-preload-assets'
export default {
plugins: [
preloadAssetsPlugin({
preloadGoogleFonts: true,
fontsToPreload: [
{
href: '/fonts/Inter.woff2',
type: 'font/woff2',
crossorigin: true
}
],
criticalJs: ['main'],
criticalCss: ['main']
})
]
}
Simply add the data-preload attribute to an image in your HTML:
<img src="/img/logo.png" data-preload width="100" height="100" alt="Logo">
The plugin will automatically inject:
<link rel="preload" href="/img/logo.png" as="image">
If your image also supports dark mode and is used with the browserux-theme-switcher, you can add the has-dark class:
<img src="/img/logo.png" class="has-dark" data-preload alt="Logo">
This will inject both versions:
<link rel="preload" href="/img/logo.png" as="image">
<link rel="preload" href="/img/logo-dark.png" as="image">
This ensures both light and dark versions are loaded early and switch instantly on theme change.
Explicitly preload images that are not in index.html (e.g. used in React components):
imagesToPreload: [
'/img/logo.png',
'/img/hero.jpg'
]
This will generate:
<link rel="preload" href="/img/logo.png" as="image">
<link rel="preload" href="/img/hero.jpg" as="image">
List of fonts to preload manually.
fontsToPreload: [
{
href: '/fonts/Inter.woff2', // URL (relative or absolute)
type: 'font/woff2', // MIME type (default : 'font/woff2')
crossorigin: true // add the `crossorigin` attribute
},
{
href: 'https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap',
as: 'style', // Override preload type (default: 'font')
crossorigin: true
}
]
as attribute ('font' by default) to support custom cases like Google Fonts CSS.as: 'style'.If
ais not set to'font', the plugin will automatically skip thetypeattribute to avoid preload warnings.
Automatically injects the preconnect tags needed to optimize the loading of Google Fonts:
preloadGoogleFonts: true
This will automatically inject the following into the <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
List of JS file names to preload (without hash), or a function to dynamically resolve them based on the current HTML page path.
criticalJs: ['main', 'app']
This will match files like:
/assets/main-abc123.js/assets/app-def456.jscriticalJs: (path) => {
if (path === '/index.html') return ['main']
if (path.includes('/blog/')) return ['blog']
return []
}
This allows per-page targeting in multi-page apps.
Same as criticalJs, but for generated CSS files.
criticalCss: ['main', 'style']
Matches:
/assets/main-abc123.css/assets/style-xyz789.csscriticalCss: (path) => {
if (path === '/index.html') return ['main']
if (path.includes('/blog/')) return ['blog']
return []
}
transformIndexHtml hook)<link rel="preload"> tags at the very beginning of the <head> (head-prepend)Using preload can improve perceived performance — but only when used wisely.
Here are some tips:
preload on all images — this can unnecessarily overload the network.criticalJs only for main entry files.prefetch or lazy loadingpreload is not a substitute for loading="lazy" on images.Goal: help the browser prioritize the loading of truly critical resources — not to load everything upfront, which can have the opposite effect.
MIT License — Free to use, modify, and distribute.
[1.2.3] – 2025-07-03
type="font/woff2" is now only added when as === 'font'as: 'style'FAQs
Optimizes performance by automatically injecting preload and preconnect tags for critical resources with Vite (JS, CSS, fonts, images).
The npm package vite-plugin-preload-assets receives a total of 13 weekly downloads. As such, vite-plugin-preload-assets popularity was classified as not popular.
We found that vite-plugin-preload-assets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.