安装插件:
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。