Vite插件搞定图片预加载

项目中存在很多图片资源,这时,可以使用预加载图片的方式,还不阻碍浏览器的页面其他资源加载绘制。

可是使用下面这个我开发的Vite插件。

Github传送门:vite-plugin-image-preload

vite-plugin-image-preload

一个用于项目图片资源预加载的Vite插件。

安装

使用Npm:

bash 复制代码
npm install vite-plugin-image-preload --save-dev

用例

js 复制代码
// vite.config.js

import imagePreLoad from "vite-plugin-image-preload";

export default defineConfig({
    plugins: [
	react(), 
	imagePreload({ 
	    dir: "images/**/*.{png,jpg,jpeg,gif,svg,webp}"
	})
    ],
});

配置选项

dir

类型: string

图片资源所在单页面应用的目录。

示例:

React项目中图片文件夹在public文件夹中:

css 复制代码
--dist
|
--public
|.   |
|.   |--images
|
--src
|
|
--package.json

配置如用例所示。

attrs

类型:

csharp 复制代码
interface Attrs {
  /** 预加载方式 默认 preload */
  rel:'preload'|'prefetch'
}

连接资源标签属性配置。

示例:

php 复制代码
// vite.config.js

import imagePreLoad from "vite-plugin-image-preload";

export default defineConfig({
    plugins: [
	react(), 
	imagePreload({ 
	    dir: "images/**/*.{png,jpg,jpeg,gif,svg,webp}",
	    attrs: {
	  	rel:'prefetch'
	    }
	})
    ],
});
相关推荐
coding随想11 分钟前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt
LuckyLay18 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu16837 分钟前
aksk前端签名实现
java·前端·javascript
烛阴43 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw01 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo1 小时前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪0011 小时前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端