Awesome
This package will not receive anymore update. You can switch to unplugin-inject-preload.
vite-plugin-inject-preload
A Vite plugin for injecting <link rel='preload'>
This plugin adds preload links on build by getting ViteJS output assets.
Supporting Vite 3 and 4.
Currently, this plugin only works on build because of the way Vite behave.
📦 Install
npm i -D vite-plugin-inject-preload
# yarn
yarn add -D vite-plugin-inject-preload
# pnpm
pnpm add -D vite-plugin-inject-preload
👨💻 Usage
All the files needs to be process by ViteJS to be find by the plugin. For example, if I load this CSS file :
@font-face {
font-family: 'Roboto';
src: url('./../fonts/Roboto-Italic.woff2');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./../fonts/Roboto-Regular.woff2');
font-weight: 400;
font-style: normal;
}
I can make the following configuration for VitePluginInjectPreload :
// vite.config.js / vite.config.ts
import VitePluginInjectPreload from 'vite-plugin-inject-preload'
export default {
plugins: [
VitePluginInjectPreload({
files: [
{
match: /Roboto-[a-zA-Z]*-[a-z-0-9]*\.woff2$/
},
{
match: /lazy.[a-z-0-9]*.(css|js)$/,
}
]
})
]
}
For the full example, check the demo folder available here.
Options
- files: An array of files object
- match: A regular expression to target build files you want to preload
- attributes (optional):
If this option is ommited, it will determine the
mime
and theas
attributes automatically. You can also add/override any attributes you want.
- injectTo (optional): By default, the preload links are injected with the
'head-prepend'
options. But you can pass'head'
to inject preload links at bottom of the head tag if you need it.<br> Since 1.1, you can pass the'custom'
option and put<!--__vite-plugin-inject-preload__-->
in your.html
file where you want to inject the preload links.
With the full options usage, you can do something like this :
// vite.config.js / vite.config.ts
import VitePluginInjectPreload from 'vite-plugin-inject-preload'
export default {
plugins: [
VitePluginInjectPreload({
files: [
{
match: /Roboto-[a-zA-Z]*-[a-z-0-9]*\.woff2$/,
attributes: {
'type': 'font/woff2',
'as': 'font',
'crossorigin': 'anonymous',
'data-font': 'Roboto'
}
},
{
match: /lazy.[a-z-0-9]*.(js)$/,
attributes: {
rel: 'modulepreload',
type: undefined,
}
}
],
injectTo: 'head-prepend'
})
]
}
👨💼 Licence
GPL-3.0