头图

安装插件:

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的时候该插件就会对图片文件进行压缩。
optipnggifsiclejpegtransvgopngquant:这些分别代表了不同的图片格式,对应着 PNGGIFJPEGSVG 和其他格式的图片压缩插件。通过设置这些参数为 null,可以禁用相应格式的压缩,如果需要压缩可以根据具体的需求进行配置。


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


兔子先森
405 声望17 粉丝

致力于新技术的推广与优秀技术的普及。