前端 JS 经典：统一 Vite 中图片转换逻辑

在 Vue + Vite 项目中有这样一段代码如下，引入了两个图片，一大一小。然后 console 出来引入结果。

import bigImg from "./assets/big.png";
import smallImg from "./assets/small.png";

console.log(bigImg);
console.log(smallImg);

在开发环境中 npm run dev，打印结果如下：

/src/assets/big.png
/src/assets/small.png

在生产环境再看，先打包 npm run build，然后本地预览 npm run preview。打印结果如下：

/assets/big-xxxxxx.png
data:image/png;base64,xxxxxx....

这就有区别了，第一个图片是路径，第二小图变成 base64。这个变化有啥问题呢，没啥问题，这是 Vite 做的优化，当它觉得一个图片尺寸很小的时候，没有必要进行网络请求了，直接整一个 dataurl 出来。

现在有个需求，是需要在开发环境下和生产环境下，使它们的路径格式要一致。

有两种方式：第一种以开发环境为主，将 vite 的这种打包优化禁止掉。将 vite.config.js 中的 assetsInlineLimit 设置为 0 就可以了。

export default defineConfig({
  plugins: [vue()],
  build: {
    assetsInlineLimit: 0,
  },
});

但是这样是不合理的，因为优化没了。换一种方法，以生产环境为主，通过自定义插件解决。这样在开发环境下，图片如果小于临界值，就会转化为 base64。

import fs from "ndoe:fs";

const MyPlugin = (limit = 4096) => {
  return {
    name: "my-plugin",
    async transform(code, id) {
      if (process.env.NODE_ENV !== "devlopment") {
        return;
      }
      if (!id.endsWith(".png")) {
        return;
      }
      const stat = await fs.promises.stat(id);
      if (stat > limit) {
        return;
      }
      const buffer = await fs.promises.readFile(id);
      const base64 = buffer.toString("base64");
      const dataUrl = `data:image/png;base64,${base64}`;
      return {
        code: `export default "${dataUrl}"`,
      };
    },
  };
};

export default defineConfig({
  plugins: [vue(), MyPlugin()],
  build: {
    assetsInlineLimit: 4096,
  },
});