⚡️⚡️⚡️ 开源了!原来 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...

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

往期精彩推荐

相关推荐
花菜会噎住42 分钟前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js
I'mxx1 小时前
【vue(2)插槽】
javascript·vue.js
花菜会噎住1 小时前
Vue3核心语法基础
前端·javascript·vue.js·前端框架
全宝1 小时前
echarts5实现地图过渡动画
前端·javascript·echarts
啃火龙果的兔子3 小时前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
sophie旭3 小时前
《深入浅出react》总结之 10.7 scheduler 异步调度原理
前端·react.js·源码
练习前端两年半3 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
吃饭睡觉打豆豆嘛3 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
然我3 小时前
还在为 Redux 头疼?Zustand 让 React 状态管理轻到能 “揣兜里”
前端·react.js·面试
lbh4 小时前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript