前言
已经两天没发文章了，最近忙着写了一个插件，用来优化网站加载速度，今天分享给大家，希望可以帮助到更多的小伙伴！
往期精彩推荐
- 🚀🚀🚀尤雨溪推荐的这个库你一定要知道！轻量⚡️，优雅！
- 🚀🚀🚀 不要只知道 Vite 了，可以看看 Farm ，Rust 编写的快速且一致的打包工具
- 🚀🚀🚀恭喜 Rolldown 获得 JS 开源奖年度突破奖，2025 年 JS 开源奖典礼回顾！🎉🎉🎉
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
前两天我们说到了，Vite 有两个很大的缺陷，一方面是 开发环境 和 生产环境 不一致，另一方面是打包之后小文件太多，导致浏览器的发送请求过多而处于排队或者加载时间过长！
虽然 js 文件可以借助插件，让多个小文件合并在一个 bundler 中，但是像我们的商城网站，全是小图片，而每个小小的图片就要单独发送一个网络请求！
要解决的问题
例如某商城列表页面，87 个请求中，63 个为图片相关的请求！
而且当 连接池已满的情况下，DNS 查找、初始连接、SSL 还会消耗额外的时间！
那么有什么办法可以让多张小图片合并成一张大点的图片吗？
我打开了万能的 github 检索了半天，发现只有针对 svg 文件的合并!
所以我这两天的时间，主要用来开发一个 vite 插件，将多张图片合并为一张大图片！
这样的好处是多张图片只需要一资源调度时间和等待服务器响应的时间！
怎么使用插件？下面是插件的使用方法！
安装
pnpm add -D vite-plugin-merge-images
# 或者
npm install -D vite-plugin-merge-images
使用方式
1. 配置插件
在 vite.config.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. 在项目中引入精灵图资源
为了方便引用文件，内置了虚拟模块，方便在任何地方直接引入生成的资源：
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 工具，它的主要作用是将多个小图片合并成一张大图，并生成相应的 CSS 或 JSON 数据，用于在网页或应用中定位和显示这些小图片！
spritesmith 仓库在这里：github.com/twolfson/sp…
我的插件库地址：github.com/mmdctjj/mer…
项目使用 monorepo 架构组织，核心包主要是功能实现，准备实现 vite 、webpack 插件版本，
但是 webpack 插件版本在那时放弃了因为有现成的库：
最后
亲眼看到自己天马行空的想法变成现实，真的是件开心的事情！
如果觉得还不错可以给我个 star ，欢迎交流和互动～
我的插件库地址：github.com/mmdctjj/mer…
文章中有错误的地方，也欢迎指正，十分感谢！
