vite 图片压缩插件

简介

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

安装

arduino 复制代码

pnpm add -D vite-plugin-image-optimizer

注意点：

sharp 和 svgo 不作为软件包的一部分安装，必须手动安装它们并将其添加为开发依赖项
这是一个设计决策，因为如果你只想使用 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 本人解析版本