前端项目性能优化:工程化环境中将图片转为base64（vite插件）

一、优化原理

通过将图片转为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;
      // 读取文件并转换为 base64
      const 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(),
  ],
});

三、效果

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

使用插件前：

使用插件后：