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'
	    }
	})
    ],
});
相关推荐
HED3 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪25 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程34 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧2 小时前
HTML字符实体和转义字符串
前端·html