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 :

1@font-face {
2  font-family: 'Roboto';
3  src: url('./../fonts/Roboto-Italic.woff2');
4  font-weight: 400;
5  font-style: italic;
6}
7
8@font-face {
9  font-family: 'Roboto';
10  src: url('./../fonts/Roboto-Regular.woff2');
11  font-weight: 400;
12  font-style: normal;
13}

I can make the following configuration for VitePluginInjectPreload :

1// vite.config.js / vite.config.ts
2import VitePluginInjectPreload from 'vite-plugin-inject-preload'
3
4export default {
5  plugins: [
6    VitePluginInjectPreload({
7      files: [
8        {
9          match: /Roboto-[a-zA-Z]*-[a-z-0-9]*\.woff2$/
10        },
11        {
12          match: /lazy.[a-z-0-9]*.(css|js)$/,
13        }
14      ]
15    })
16  ]
17}

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 the as 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.
  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 :

1// vite.config.js / vite.config.ts
2import VitePluginInjectPreload from 'vite-plugin-inject-preload'
3
4export default {
5  plugins: [
6    VitePluginInjectPreload({
7      files: [
8        {
9          match: /Roboto-[a-zA-Z]*-[a-z-0-9]*\.woff2$/,
10          attributes: {
11            'type': 'font/woff2',
12            'as': 'font',
13            'crossorigin': 'anonymous',
14            'data-font': 'Roboto'
15          }
16        },
17        {
18          match: /lazy.[a-z-0-9]*.(js)$/,
19          attributes: {
20            rel: 'modulepreload',
21            type: undefined,
22          }
23        }
24      ],
25      injectTo: 'head-prepend'
26    })
27  ]
28}

👨‍💼 Licence

GPL-3.0