⚡️⚡️⚡️ 开源了!原来 Vite 加载图片还可以这样啊!🚀🚀🚀

前言

已经两天没发文章了,最近忙着写了一个插件,用来优化网站加载速度,今天分享给大家,希望可以帮助到更多的小伙伴!

往期精彩推荐

正文

前两天我们说到了,Vite 有两个很大的缺陷,一方面是 开发环境 和 生产环境 不一致,另一方面是打包之后小文件太多,导致浏览器的发送请求过多而处于排队或者加载时间过长!

虽然 js 文件可以借助插件,让多个小文件合并在一个 bundler 中,但是像我们的商城网站,全是小图片,而每个小小的图片就要单独发送一个网络请求!

要解决的问题

例如某商城列表页面,87 个请求中,63 个为图片相关的请求!

而且当 连接池已满的情况下,DNS 查找、初始连接、SSL 还会消耗额外的时间!

那么有什么办法可以让多张小图片合并成一张大点的图片吗?

我打开了万能的 github 检索了半天,发现只有针对 svg 文件的合并!

所以我这两天的时间,主要用来开发一个 vite 插件,将多张图片合并为一张大图片!

这样的好处是多张图片只需要一资源调度时间和等待服务器响应的时间!

怎么使用插件?下面是插件的使用方法!

安装

bash 复制代码
pnpm add -D vite-plugin-merge-images
# 或者
npm install -D vite-plugin-merge-images

使用方式

1. 配置插件

vite.config.ts 中引入并使用插件:

ts 复制代码
import { defineConfig } from "vite";
import vitePluginSpritesmith from "vite-plugin-merge-images";

export default defineConfig({
  plugins: [
    vitePluginSpritesmith({
      src: "./src/assets", // 图片来源目录
      output: "./dist/sprites", // 精灵图和坐标输出路径
      spriteName: "sprite.png", // 精灵图文件名
      coordsName: "sprite.json", // 坐标 JSON 文件名
      glob: "**/*.png", // 匹配图片的 glob 模式
    }),
  ],
});
2. 在项目中引入精灵图资源

为了方便引用文件,内置了虚拟模块,方便在任何地方直接引入生成的资源:

ts 复制代码
import {
  sprite,
  coords,
  getImageStyle,
} from "virtual:merge-images-runtime";

export function Icon({ name }: { name: string }) {
  const style = getImageStyle(coords, name, 1); // 或传 scale 缩放比例
  return <img src={sprite} style={style} alt={name} />;
}

这个插件还会继续完善,如果有好的想法可以告诉我,帮助我完善它!

原理

怎么做到的了?其实是接住了 spritesmith 工具,它的主要作用是将多个小图片合并成一张大图,并生成相应的 CSSJSON 数据,用于在网页或应用中定位和显示这些小图片!

spritesmith 仓库在这里:github.com/twolfson/sp...

我的插件库地址:github.com/mmdctjj/mer...

项目使用 monorepo 架构组织,核心包主要是功能实现,准备实现 vitewebpack 插件版本,

但是 webpack 插件版本在那时放弃了因为有现成的库:

github.com/mixtur/webp...

最后

亲眼看到自己天马行空的想法变成现实,真的是件开心的事情!

如果觉得还不错可以给我个 star ,欢迎交流和互动~

我的插件库地址:github.com/mmdctjj/mer...

文章中有错误的地方,也欢迎指正,十分感谢!

往期精彩推荐

相关推荐
lumi.几秒前
Swiper属性全解析:快速掌握滑块视图核心配置!(2.3补充细节,详细文档在uniapp官网)
前端·javascript·css·小程序·uni-app
芝士加25 分钟前
还在用html2canvas?介绍一个比它快100倍的截图神器!
前端·javascript·开源
阿虎儿26 分钟前
React 引用(Ref)完全指南
前端·javascript·react.js
前端小大白1 小时前
JavaScript 循环三巨头:for vs forEach vs map 终极指南
前端·javascript·面试
晴空雨1 小时前
面试题:如何判断一个对象是否为可迭代对象?
前端·javascript·面试
阿虎儿1 小时前
React 事件类型完全指南:深入理解合成事件系统
前端·javascript·react.js
Hilaku1 小时前
前端需要掌握多少Node.js?
前端·javascript·node.js
王六岁1 小时前
JavaScript包装类型深度解析:理解原始值与对象的桥梁
javascript·面试
Adler_hu1 小时前
cli项目页面白屏时间优化
vue.js·webpack
Adler_hu1 小时前
高复用性组件封装指南
前端·vue.js