1.说明
vite-plugin-imagemin的npm首页:一个压缩图片资源的 vite 插件。
2.配置镜像
package.json
:
"resolutions": {
"//": "用于安装imagemin的依赖关系,因为中国可能没有安装imagemin。",
"bin-wrapper": "npm:bin-wrapper-china"
},
3.安装
yarn add vite-plugin-imagemin --dev
4.配置插件
build\vite\plugin\imagemin.ts
:
// Image resource files used to compress the output of the production environment
// https://github.com/anncwb/vite-plugin-imagemin
import viteImagemin from 'vite-plugin-imagemin';
export function configImageminPlugin() {
const plugin = viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
webp: {
quality: 75,
},
mozjpeg: {
quality: 8,
},
pngquant: {
quality: [0.8, 0.9],
speed: 4,
},
svgo: {
plugins: [
{
removeViewBox: false,
},
{
removeEmptyAttrs: false,
},
],
},
});
return plugin;
}
5.配置Vite
build\vite\plugin\index.ts
:
// ...
import { configImageminPlugin } from './imagemin';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
// ...
if (isBuild) {
//vite-plugin-imagemin
VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
}
return vitePlugins;
}
上一章
第五十七章-Vite插件-vite-plugin-theme
下一章
第五十九章-Vite插件-vite-plugin-compression