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

简介: 前端 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,
  },
});
目录
打赏
0
0
0
0
16
分享
相关文章
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
118 8
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等