vite-plugin-preload-image-custom

一个用于预加载图片的 Vite 插件，可以帮助你在页面加载时自动预加载指定的图片资源。

特性

• 支持自定义预加载图片路径
• 自动注入预加载脚本
• 优化页面加载性能
• 支持 TypeScript

安装

• npm install vite-plugin-preload-image-custom --save-dev
• yarn add vite-plugin-preload-image-custom -D
• pnpm add vite-plugin-preload-image-custom -D

使用方法

在你的 vite.config.ts 或 vite.config.js 中配置：

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import preloadImagePlugin from 'vite-plugin-preload-image-custom'
4
5export default defineConfig({
6  // base:"/preload-image",
7  plugins: [vue(), preloadImagePlugin({
8    bundleDir: "src/assets/images/preload/*.{jpg,png,svg}",
9    publicDir: "images/preload/*.{jpg,png,svg}",
10    idleTimeout: 2000,
11    autoPreload: true,
12  })],
13})

配置选项

参数	类型	必填	默认值	描述
bundleDir	string	否	""	会被 vite 处理的图片路径
publicDir	string	否	""	publicDir目录下不会被 vite 处理的图片路径（如：public目录下的静态资源）
idleTimeout	number	否	500	网络空闲时的超时时间
autoPreload	boolean	否	false	是否自动预加载图片

示例

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import preloadImagePlugin from 'vite-plugin-preload-image-custom'
4
5export default defineConfig({
6  // base:"/preload-image",
7  plugins: [vue(), preloadImagePlugin({
8    bundleDir: "src/assets/images/preload/*.{jpg,png,svg}",
9    publicDir: "images/preload/*.{jpg,png,svg}",
10    idleTimeout: 2000,
11    autoPreload: true,
12  })],
13})

注意事项

• 图片路径应该是相对于 public 目录的路径
• 确保图片路径正确，否则可能会导致预加载失败

License

MIT

作者

[yejinyun]

贡献

欢迎提交 Issue 和 Pull Request！