vite静态资源压缩-图片压缩

安装插件：

pnpm i vite-plugin-imagemin -D

vite.config.ts中使用

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import viteImagemin from "vite-plugin-imagemin";

// 省略其它....
  return {
    plugins: [
      vue(),
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7, // 设置 gif 压缩级别
          interlaced: false
        },
        // 无损压缩配置，无损压缩下图片质量不会变差
        optipng: {
          optimizationLevel: 7 // 设置 png 压缩级别
        },
        mozjpeg: {
          quality: 20 // 设置 jpg 压缩质量
        },
        // 有损压缩配置，有损压缩下图片质量可能会变差
        pngquant: {
          quality: [0.8, 0.9], // 设置 png 压缩质量范围
          speed: 4
        },
        // svg 优化
        svgo: {
          plugins: [
            {
              name: "removeViewBox"
            },
            {
              name: "removeEmptyAttrs",
              active: false
            }
          ]
        }
      })
    ],
    }
  };
});

在pnpm run build的时候该插件就会对图片文件进行压缩。
optipng、gifsicle、jpegtran、svgo、pngquant：这些分别代表了不同的图片格式，对应着 PNG、GIF、JPEG、SVG 和其他格式的图片压缩插件。通过设置这些参数为 null，可以禁用相应格式的压缩，如果需要压缩可以根据具体的需求进行配置。

---

参考资料：
npm官网：vite-plugin-imagemin
github：vite-plugin-imagemin