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 本人解析版本

相关推荐
懒大王爱吃狼26 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js