# 前言最近写页面的时候，用webp优化图片大小，就想着有没有相关插件可以开发和打包的时候自动帮我转化和压缩。因为用vite打包工具，就去社区找相关插件，可没找到一个比较符合我要求的，就打算自己写一个吧👀。(也算是第一次写vite插件吧😂) # 仓库 github: # 需求 * 能压缩图片，压缩质量能配置 * 能自动转webp格式，并且打包后能把图片引用路径的后缀改成`.webp` * 支持开发环境和生产环境 * 不影响原项目图片资源，开发要无感，使用简单 # 技术栈 * sharp：图片压缩、格式转换 * @vitejs/plugin-vue：vite插件开发 # 实现思路 ## 生产环境生产环境要考虑两个功能：
1、**压缩图片**：这个比较简单，在generateBundle钩子函数里面处理图片的chunk中的buffer就可以了 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/498be8d2db06448bbdf944261e10cf56~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=1lyCkzCzRzlhJ%2BOCB61awmexheE%3D) ```ts export default function ImageTools() { return { // hook async generateBundle(_options, bundle) { for (const key in bundle){ // 过滤图片key const { ext } = parse(key) if (!/(png|jpg|jpeg|webp)$/.test(ext)) { continue } // 处理图片buffer if (chunk.source && chunk.source instanceof Buffer) { // 压缩图片，这里就省略逻辑了，可以去看sharp文档 const pressBuffer = await pressBufferToImage(chunk.source) // 替换处理后的buffer chunk.source = pressBuffer } } } } } ``` 2、**转webp格式**: 还是在generateBundle中，直接copy一份图片的chunk，替换chunk的source和fileName，再添加到bundle中输出 ```ts export default function ImageTools() { return { // hook async generateBundle(_options, bundle) { for (const key in bundle){ // 过滤图片key ... // 处理图片buffer ... /*webp相关逻辑*/ // 克隆原本的chunk const webpChunk = structuredClone(chunk) // 生成webp的buffer, 逻辑省略 const webpBuffer = await toWebpBuffer(chunk.source) // 更改新chunk的source和fileName webpChunk.source = webpBuffer const ext = extname(path) const webpName = key.replace(ext, '.wep') webpChunk.fileName = webpName // 添加到bundle中 bundle[webpName] = webpChunk } } } } ``` 3、**替换路径后缀为`.webp`**：这里就有点麻烦，需要考虑图片的引入方式和打包的产物，解析产物去替换了

引入方式： * css：`background`、`background-image` * 组件、html文件中的标签：`img`、`source`、`

`、`

` * import：`import 'xxx/xxx/xx.png'` 产物, 以vue为例：
css中引入的，打包后还是在css中 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4070d853d20f4522b9f5cf40c4e19fdb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=4%2F0ow41Xddkdicicx4Su%2FCij1uk%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b15bdf0ac28e460db4c1d87b9dec4d8e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=BfObUTs%2BpDoGhUHe5pTdAd2mCZw%3D) 组件中的标签引入，打包后是在js中 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/56bba3ac1ea14aadb808a49b654b223f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=IuMIGmIU21vYYTT%2B4MKIZ58hITc%3D) html文件中的标签：就在html中 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d43e7a81b20c44aaa85f6c61ce518c60~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=y27UYrbwFZjwclTln5zG6ZnGlsU%3D) 知道产物后就比较好替换了，我这里采用一种比较巧妙的方法，不需要转ast就能精准替换路径后缀:
先在generateBundle中收集打包后图片的名称和对应的webp名称: ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a05ad3aa871b48319dc899af6f69292c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=ACvFrmWRo%2FltRzWKhZ1ZSpJwMsg%3D) 再替换上述产物文件中的图片后缀: ```ts function handleReplaceWebp(str: string) { let temp = str for (const key in map) { // 这里的map就是上述图片中的对象 temp = temp.replace(new RegExp(key, 'g'), map[key]) } return temp } export default function ImageTools() { return { // hook async generateBundle(_options, bundle) { for (const key in bundle){ // 过滤图片key ... // 处理图片buffer ... // 替换js和css中的图片后缀 if (/(js|css)$/.test(key) && enableWebp) { if (/(js)$/.test(key)) { chunk.code = handleReplaceWebp(chunk.code) } else if (/(css)$/.test(key)) { chunk.source = handleReplaceWebp(chunk.source) } } } }, // 替换html中的图片后缀 async writeBundle(opt, bundle) { for (const key in bundle) { const chunk = bundle[key] as any if (/(html)$/.test(key)) { const htmlCode = handleReplaceWebp(chunk.source) writeFileSync(join(opt.dir!, chunk.fileName), htmlCode) } } } } } ``` 好了，这就是生产环境大概实现思路了，接下来看开发环境中如何转webp ## 开发环境有人可能认为，开发环境并不需要压缩和转webp功能，其实不然，开发环境主要是为了看图片处理后的效果，是否符合预期效果，不然每次都要打包才能看，就有点麻烦了. 开发环境主要考虑以下两点: 1. 和生产环境一样，需要做压缩和转webp处理 2. 需要加入缓存，避免每次热更都进行压缩和转webp **压缩和转webp处理**
这里就比较简单了，不需要处理bunlde，在请求本地服务器资源hook中(configureServer) 处理并返回图片资源就行:
```ts export default function ImageTools() { return { // hook configureServer(server) { server.middlewares.use(async (req, res, next) => { if (!filterImage(req.url || '')) return next() try { const filePath = decodeURIComponent( path.resolve(process.cwd(), req.url?.split('?')[0].slice(1) || '') ) const buffer = readFileSync(filePath) // 处理图片压缩和转webp,返回新的buffer,逻辑省略 const newBuffer = await pressBufferToImage(buffer) if (!newBuffer) { return next() } res.setHeader('Content-Type', `image/webp`) res.end(newBuffer) } catch (e) { return next() } }) } } ``` **缓存图片**
这里的思路:
* 第一次请求图片时，缓存对应图片的文件，并带上hash值 * 每次请求时都对比缓存文件的hash，有就返回，没有就继续走图片处理逻辑详细代码就不贴了，这里只写大概逻辑 ```ts export function getCacheKey({ name, ext, content}: any, factor: AnyObject) { const hash = crypto .createHash('md5') .update(content) .update(JSON.stringify(factor)) .digest('hex') return `${name}_${hash.slice(0, 8)}${ext}` } export default function ImageTools() { return { // hook configureServer(server) { server.middlewares.use(async (req, res, next) => { if (!filterImage(req.url || '')) return next() try { const filePath = decodeURIComponent( path.resolve(process.cwd(), req.url?.split('?')[0].slice(1) || '') ) // 过滤图片请求 ... const { ext, name } = parse(filePath) const file = readFileSync(filePath) // 获取图片缓存的key,就是图片hash的名称 const cacheKey = getCacheKey( { name, ext, content: file }, { quality, enableWebp, sharpConfig, enableDevWebp, ext } // 这里传生成hash的因子,方便后续改配置重新缓存图片 ) const cachePath = join('node_modules/.cache/vite-plugin-image', cacheKey) // 读缓存 if (existsSync(cachePath)) { return readFileSync(cachePath) } // 处理图片压缩和转webp,返回新的buffer const buffer = readFileSync(filePath) // 处理图片压缩和转webp,返回新的buffer,逻辑省略 const newBuffer = await pressBufferToImage(buffer) // 写入缓存 writeFile(cachePath, newBuffer, () => {}) ... }) } } ``` # 效果这里就爬几张原神的图片展示了(原神,启动!!)

开发环境: ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/006a129422404713a45652ebb4aaa8ad~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=I%2FyNCdAOkZ79zCL8n%2FDHNtID1Gk%3D) 生产环境: ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/019f3028286e458fa6acc5256406114a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=vUuhzfL7y9q6NbIhNuPoOIwzDik%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/06317083a1cc46edb99fb434f3e83f83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=YtQltg9cLBBqAtFDwe9RGcMYPOs%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ce6af948767c4a61b0e5e3632b557f3f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=yvEBZ2s7f8HZcUzH1nwGux5l4tY%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b2af112d9c69446eba491a616b1ca64f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zi_5biV55Cq5bCU:q75.awebp?rk3s=f64ab15b&x-expires=1762308323&x-signature=5u8OkW0aPCOUrBhWkc77yIcX0O0%3D) # 总结 * 以上就是大致思路了，代码仅供参考 * GitHub: [vite-plugin-image-tools](https://github.com/illusionGD/vite-plugin-image-tools) * 后续打算继续维护这个仓库并更新更多图片相关功能的，有问题欢迎提issue呀\~