Vite插件搞定图片预加载

码上有料2024-12-07 22:09

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

可是使用下面这个我开发的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'
	    }
	})
    ],
});