一、优化原理

通过将图片转为base64的形式来减少请求，实现性能优化。

考虑到过大的图片转为base64形式会导致加载时间过长，反而会影响性能，所以需要对转化的图片的大小进行限制。

每次去使用图片的时候都去手动转化一次是很麻烦的，所以我们可以写一个插件，在项目运行时自动将符合条件的图片进行转换。

下面的代码示例是在vite中

二、代码

vite.config.ts中：

import { defineConfig } from "vite";
import fs from "fs";
const base64SetPlugin = (limit = 4096) => {return {name: "base64-set-plugin",async transform(_, id) {// 只处理图片文件if (!/\.(png|jpg|svg)$/.test(id)) return;//获取文件数据const stat = await fs.promises.stat(id);// 如果文件大小超过限制则不转换，太大的图片转换为base64不划算if (stat.size > limit) return;// 读取文件并转换为 base64const buffer = await fs.promises.readFile(id);const base64 = buffer.toString("base64");// 返回转换后的代码const dataUrl = `data:image/${id.split(".").pop()};base64,${base64}`;return {code: `export default ${JSON.stringify(dataUrl)}`,};},};
};
export default defineConfig({plugins: [base64SetPlugin(),],
});

三、效果

我们可以在使用图片的页面中进行检查，查看代码。

使用插件前：

使用插件后：