vite-content-preload
Advanced tools
[](https://github.com/ErikGS/vite-content-preload/actions/workflows/ci.yml) [](
Vite plugin to automatically inject <link rel="preload"> tags for bundled assets (e.g., those imported via relative paths or modules) referenced in initial JS chunks and CSS, optimizing page load performance. Please note that it does not handle assets in the public directory — if you want to know the difference between bundled assets and assets in the public directory, see Vite's asset handling docs for details.
If you have any questions, try checking the F.A.Q.
<link rel="preload"> for fonts, images, videos, and moreSee How it works.
npm install vite-content-preload --save-dev
Add the plugin to your vite.config.ts:
import autoPreload from 'vite-content-preload'
export default {
plugins: [
autoPreload({
maxSizeKB: 200, // Only preload assets up to 200KB (default)
extensions: /\.(woff2?|ttf|otf|png|jpe?g|gif|svg|webp|mp4|webm)$/i // File types to preload (default)
})
]
}
maxSizeKB
number200extensions
RegExp/\.(woff2?|ttf|otf|png|jpe?g|gif|svg|webp|mp4|webm)$/i<link rel="preload"> tag into the HTML <head>.Given this HTML:
<html>
<head>
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body></body>
</html>
If main.js imports font.woff2 and styles.css references image.png, the plugin will inject before </head>:
<link rel="preload" href="/font.woff2" as="font" crossorigin>
<link rel="preload" href="/image.png" as="image">
Q: Why isn't my image in the public folder being preloaded?
A: The plugin targets bundled assets for optimal performance. Public assets are copied as-is without hashing or optimization. To preload your image, move it to an assets folder and reference it with a relative path (e.g., import img from './assets/my-image.png'; or <img src="./assets/my-image.png" /> in templates). This enables Vite to process it fully—see Vite's asset handling docs for details.
Q: I'm using absolute paths like url('/images/bg.png') — how do I switch to bundled?
A: Refactor to relative paths (e.g., url('../images/bg.png')) so Vite bundles it. If the asset is in the public directory, consider relocaing it outside public and switching to import-based handling. Benefits of using import-based assets includes automatic filename hashing for better caching and potential size reductions — see Vite's asset handling docs for details.
Q: Can I configure the plugin to include assets in public directory?
A: Not currently, to keep the plugin lightweight and focused on best practices.
MIT
Made with ❤️ and ☕ by Erik GS
💖 Support my work → Sponsor me on GitHub
FAQs
[](https://github.com/ErikGS/vite-content-preload/actions/workflows/ci.yml) [](
The npm package vite-content-preload receives a total of 0 weekly downloads. As such, vite-content-preload popularity was classified as not popular.
We found that vite-content-preload 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
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.