vite-plugin-image-preload-pro

一个专注于图片资源优化的 Vite 插件，通过页面空闲预加载和预获取策略，显著提升页面图片加载速度，减少用户等待时间，提供更流畅的浏览体验。

A Vite plugin focused on image resource optimization, significantly improving page image loading speed through intelligent preloading and prefetching strategies.

特性 | Features

🚀 glob混合注入 - 支持public目录、assets目录资源以数组形式混合引入
💡 多级预加载策略 - 支持 preload/prefetch/多种预加载模式
🎯 环境加载控制 - 可根据开发环境动态调整预加载策略
📦 多种引入模式 - 之前api接口图片资源预加载，确保关键资源优先加载
🔧 灵活配置 - 提供丰富的配置选项，满足不同场景需求

使用场景 | Use Cases

📱 图片密集型应用

• 电商产品展示页面
• 图片相册和画廊
• 社交媒体信息流

🖼️ 大图预加载场景

• 轮播图和 Banner
• 商品详情大图
• 全屏背景图

🎮 交互式图片应用

• 图片预览功能
• 图片编辑器
• 图片切换动画

安装 | Installation

1npm install vite-plugin-image-preload-pro --save-dev
2# or
3yarn add vite-plugin-image-preload-pro -D
4# or
5pnpm add vite-plugin-image-preload-pro -D

配置项 | Options

参数	类型	默认值	描述	是否可选
dir	string | string[]	-	glob模式的预加载图片目录	必填
fetchUrl	string[]	[]	需要预加载的完整URL数组	可选
attrs	{ rel: 'preload'|'prefetch' }	{ rel: 'preload' }	预加载标签的属性配置	可选
prodBase	string	'/'	生产环境下的基础路径	可选
prodPublicDirName	string	'public'	生产环境下的公共目录名称	可选

示例 | Examples

基础用法

1// vite.config.ts
2import { defineConfig } from 'vite';
3import { imagePreload } from 'vite-plugin-image-preload-pro';
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    imagePreload({
9      // 1. 预加载资源来源于本地assets。注意：需要使用相对路径'
10      dir: './src/assets/images/*.{jpg,png}', /* 或'src/assets/images/*.{jpg,png}' */
11      
12       // 2. 预加载资源来源于本地public目录。注意：需要使用相对路径'
13      dir: './images/*.{jpg,png}' /* 或'images/*.{jpg,png}' */
14    })
15  ]
16});

混合用法

1// vite.config.ts
2import { defineConfig } from 'vite';
3import { imagePreload } from 'vite-plugin-image-preload-pro';
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    imagePreload({
9      //  混合模式。支持数组形式的glob目录
10      dir: ['images/*.{jpg,png}', './src/assets/images/*.{jpg,png}'],
11    })
12  ]
13});

可选参数配置

1import { imagePreload } from 'vite-plugin-image-preload-pro';
2
3export default defineConfig({
4  plugins: [
5    vue(),
6    imagePreload({
7      dir: ['images/*.{jpg,png}', './src/assets/images/*.{jpg,png}'],
8
9      // 1. 预加载资源来源于api接口，注意：需要使用完整的URL
10      fetchUrl: ['http://localhost:5173/images/xxx.png'],
11
12      attrs: {
13       // 2. 设置预加载模式，默认为preload模式
14        rel: 'preload'
15      },
16
17      // 3. 项目的基础路径。
18      //    + 注意：若修改了defineConfig中的base属性则需要传递prodBase。
19      //    + 格式为'/xxx/',默认为'/',开发环境可忽略不传。
20
21      prodBase: '/xxx/',
22      
23      // 4. 项目的公共资源目录名称。
24      //    + 注意：若修改了defineConfig中的publicDir属性则需要传递prodPublicDirName。
25      //    + 格式为'xxx'，默认为'public'，开发环境可忽略不传。
26      prodPublicDir: 'xxx'
27    })
28  ]
29});

工作原理 | How it works

该插件通过以下步骤优化图片加载：

1. 分析页面中的图片资源
2. 生成预加载策略
3. 注入预加载代码
4. 优化加载顺序

The plugin optimizes image loading through the following steps:

1. Analyzing image resources in the page
2. Generating preload strategies
3. Injecting preload code
4. Optimizing loading order

性能对比 | Performance Comparison

在典型的电商产品页面测试中：

🚀 首屏图片加载时间减少 50% 📉 页面跳转延迟减少 30% 💡 用户感知加载时间改善 60%

注意事项 | Notes

• Vite版本须 >= 5.4.2，请及时更新您的Vite版本!
• 建议仅对关键图片资源启用预加载
• 合理配置预加载策略，避免资源浪费
• 考虑移动端网络环境，适当调整配置
• 大量图片预加载可能会影响首屏加载速度
• 建议结合实际网络环境和用户设备进行配置

贡献 | Contributing

欢迎提交 Issues 和 Pull Requests！

Feel free to submit issues and pull requests!

许可证 | License

MIT

作者 | Author

jelly-jellys

更新日志 | Changelog

0.0.6

• 🔨 修复generateBundle中originalFileName属性缺失，及assets资源引入失败问题

0.0.3

• 🐛 修复 fast-glob 导入方式导致的构建错误
• ✨ 优化模块导入导出方式
• 🔧 提升包的兼容性

0.0.2

• 🔨 支持 ESM 和 CommonJS 双模块系统
• 🎯 优化包的构建配置
• 📦 完善包的导出配置

0.0.1

• 🎉 初始版本发布
• ✨ 基础功能实现

---

如果这个插件对你有帮助，欢迎给个 Star ⭐️