vite-plugin-img-reload
配合
@mxnet/imagetransition指令发挥最大功效
Usage
import { resolve } from "path";
import vitePluginImgReload from "vite-plugin-img-reload";
// 插件所有选项
export interface vitePluginImgReloadOption {
// 资源路径
resourcePathDir?: string;
// 输出路径
outputDir?: string;
}
const config = new ViteConfiguration()
.setScenes("mobile")
.setTechnologyStack("vue", {})
.addAutoImport({})
.getConfig({
plugins: [
inspect(),
ImgReload({
resourcePathDir: resolve("./src/assets/"),
}),
],
}) as UserConfig;Principle
该插件会输出一个 css 文件， @mxnet/imagetransition 中的指令逻辑会用到该样式
@mxnet/imagetransition 中的指令有一个非常重要的参数 def 代表占位图
通常来说 在加载一个大图的时候我们不希望一个试图占位处一片空白，空白太枯燥了，当我们知道是因为网络问题造成的加载缓慢时
我们渴望看见一个轮廓后 慢慢等到图片加载 ，这时候我们需要一个占位图，但我们又不希望占位图消耗太多资源
当 插件中的 resourcePathDir 参数不为空时候，插件会去查找该路径下的所有图片并且转为极小的base64
生成一个 base64 集合文件 , 生成于 vite.root 参数路径 或指定的 outputDir 参数路径
你可以尽情的引用这个极小的资源文件
后配合 @mxnet/imagetransition 指令 当原图加载完成后 丝滑的从缩略图切换至原图
原图
压缩后
