vite 图片压缩插件

简介

要给大家介绍的是这款 vite-plugin-image-optimizer

  • 核心是使用 Sharp.js 和 SVGO 来优化图像资源

安装

arduino 复制代码
pnpm add -D vite-plugin-image-optimizer

注意点:

  • sharpsvgo 不作为软件包的一部分安装,必须手动安装它们并将其添加为开发依赖项
  • 这是一个设计决策,因为如果你只想使用 svgo 优化 svg 资源,则可以选择跳过安装 sharp ,反之亦然
csharp 复制代码
pnpm add -D sharp 
pnpm add -D svgo

基础使用

详细使用可进入 github 文档进行阅读

javascript 复制代码
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { defineConfig } from 'vite';

export default defineConfig(() => {
  return {
    plugins: [
      ViteImageOptimizer({
        /* pass your config */
      }),
    ],
  };
});

核心逻辑

如何在打包过程中获取项目中使用到的图片

generateBundle 钩子

在这个钩子你可以获取即将要写入磁盘的打包产物,在写入磁盘前对其进行修改

javascript 复制代码
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'my-plugin',
      generateBundle(options, bundle) {
        for (const fileName in bundle) {
          const asset = bundle[fileName];
          if (asset.type === 'asset') {
            // 对静态资源进行处理
            console.log(`Asset: ${fileName}`);
          } else if (asset.type === 'chunk') {
            // 对代码块进行处理
            console.log(`Chunk: ${fileName}`);
          }
        }
      }
    }
  ]
});
asset 长啥样

type === asset 通常指代码外的资源,包含图片、字体、css 文件等,因为我们要处理的是图片,下面展示了图片对应的输出

yaml 复制代码
{
  fileName: 'assets/6-DKYr8hna.jpg',
  name: '6.jpg',
  needsCodeReference: false,
  source: <Buffer ff d8  ... 9683 more bytes>,
  type: 'asset'
}
思路

有了前面的铺垫,后续逻辑就清晰了

  • generateBundle 钩子中拿到打包产物
  • 根据 type === asset 以及文件名所对应的后缀判断是否是图片资源
  • 对图片资源的 source 进行压缩,使用 sharp 或者其他
  • 压缩后反写入 source 属性
  • 压缩完成,等待产物生成
ini 复制代码
// 简化后的示意代码
generateBundle: async (_, bundle) => {
  const keys = Object.keys(bundle)
  const imageRegex = /\.(?:jpg|jpeg|png|gif|bmp|webp)$/i
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const item = bundle[key]

    if (item.type === 'asset' && imageRegex.test(item.name)) {
      const source = (bundle[key] as any).source;
      const content = await compressImg(source);      
      (bundle[key] as any).source = content;      
    }
  }  
}

源码解析

该插件除了最基础的图片压缩外,还加入了其他功能

  • 压缩产物缓存
  • public 下图片处理
  • ...

感兴趣的可移步源码,or 本人解析版本

相关推荐
Mr_Xuhhh40 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端