vite-preload-images-plugin
v1.0.0
Published
A Vite plugin that automatically generates preload tags for images in your build output
Maintainers
zhangweiwei666Readme
vite-preload-images-plugin
一个 Vite 插件，用于在生产构建时自动为图片生成预加载标签，提升页面加载性能。
功能特性
- 🚀 自动扫描指定目录中的图片文件
- 📦 在生产构建时生成预加载标签
- ⚡ 支持多种图片格式 (PNG, JPG, JPEG, GIF, WebP)
- 🎯 可配置低优先级图片目录
- 🔧 完全可配置的选项
- 📝 TypeScript 支持
安装
npm install vite-preload-images-plugin使用方法
基本用法
import { defineConfig } from 'vite'
import preloadImagesPlugin from 'vite-preload-images-plugin'
export default defineConfig({
plugins: [
preloadImagesPlugin()
]
})高级配置
import { defineConfig } from 'vite'
import preloadImagesPlugin from 'vite-preload-images-plugin'
export default defineConfig({
plugins: [
preloadImagesPlugin({
// 指定需要预加载的图片目录
preloadDirs: ['src/assets', 'src/images'],
// 指定低优先级目录（会添加 fetchpriority="low"）
lowPriorityDirs: ['gif', 'backgrounds'],
// 排除特定文件
excludeFiles: ['logo.png'],
// 自定义支持的图片扩展名
imageExtensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'],
// 启用调试日志
debug: true
})
]
})配置选项
| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| preloadDirs | string[] | ['src/assets'] | 需要预加载的图片目录列表 |
| lowPriorityDirs | string[] | ['gif'] | 需要特殊处理 fetchpriority 的目录 |
| excludeFiles | string[] | [] | 需要排除的文件列表 |
| imageExtensions | string[] | ['png', 'jpg', 'jpeg', 'gif', 'webp'] | 支持的图片扩展名 |
| debug | boolean | false | 是否启用调试日志 |
工作原理
- 扫描阶段: 插件会扫描配置的目录，收集所有支持的图片文件
- 构建阶段: 在 Vite 生产构建时，插件会分析构建产物
- 匹配阶段: 将源文件路径与构建后的资源路径进行匹配
- 生成阶段: 为匹配的图片生成预加载标签并插入到 HTML 的
<head>中
生成的 HTML
插件会在 HTML 的 <head> 标签中插入类似以下的预加载标签：
<!-- Auto-generated preload tags -->
<link rel="preload" as="image" href="./assets/logo-abc123.png">
<link rel="preload" as="image" href="./assets/hero-bg-def456.jpg">
<link rel="preload" as="image" href="./assets/animation-ghi789.gif" fetchpriority="low">注意事项
- 插件只在生产构建时生效
- 确保图片文件路径正确配置
- 建议在
lowPriorityDirs中配置动画图片（如 GIF）以优化加载性能 - 使用
debug: true选项可以查看详细的处理日志
许可证
MIT
贡献
欢迎提交 Issue 和 Pull Request！