vite-plugin-preload-images

Vite Plugin: Preload Images

Installation

1npm install vite-plugin-preload-images -D
2pnpm add vite-plugin-preload-images -D

Note

开发环境下会处理文件夹下所有匹配到的资源
生产环境仅处理被打包处理的资源

非 public 目录下 rollup 版本 4.20.0（vite 版本 5.4.2）及以上为精准匹配（originalFileName）预加载图片
否则，指定文件夹外的其他被打包处理的同名的资源也会被预加载

Usage

1import { defineConfig } from 'vite'
2import VitePluginPreloadImages from 'vite-plugin-preload-images'
3
4export default defineConfig({
5    plugins: [
6        VitePluginPreloadImages({
7            dirs: 'src/assets/images/*.{jpg,png,svg}',
8            attrs: {
9                rel: 'prefetch'
10            }
11        })
12    ]
13})

Options

选项	类型	默认值	描述
dirs	string | (string | DirOptions)[]	-	图片文件匹配模式
attrs	Object	-	link 标签属性配置
batchSize	number	2	同时预加载的图片数量
publicDir	boolean	false	是否从 public 目录读取
timeout	number	5000	加载超时时间(ms)

Examples

1VitePluginImagePreload({
2    dirs: 'src/assets/images/*.{jpg,png,svg}',
3    attrs: {
4        rel: 'prefetch'
5    }
6})

1VitePluginImagePreload({
2    dirs: [
3        'preload/images/*.{jpg,png,svg}',
4        'preload/icons/*.{jpg,png,svg}',
5    ],
6    attrs: {
7        rel: 'prefetch'
8    },
9    publicDir: true
10})

1VitePluginImagePreload({
2    dirs: [
3        {
4            dir: 'preload/images/*.{jpg,png,svg}',
5            publicDir: true
6        },
7        {
8            dir: 'src/assets/images/*.{jpg,png,svg}',
9            publicDir: false
10        },
11        'src/assets/icons/*.{jpg,png,svg}'
12    ],
13    attrs: {
14        rel: 'prefetch',
15        crossorigin: 'anonymous',
16        fetchPriority: 'low'
17    },
18    batchSize: 2,
19    publicDir: false,
20    timeout: 5000
21})