Skip to content

Based on sharp.js, compress your image before vite generate bundle. It's easy and fast! 基于sharp.js的vite图片压缩插件,又快又好用!

Notifications You must be signed in to change notification settings

60late/vite-plugin-minipic

Repository files navigation

vite-plugin-minipic

English | 中文

vite-plugin-minipic is a helpful tool to compress images in morden vite project.
It's easy to use, and it's faaaaaaast 🚀🚀🚀🚀!

example

❓ Why minipic?

  • 🚀 Fast compress speed
    Based on sharp.js, minipic have incredibly compresse speed.
    Fully satisfy multi-images/big-images requirements.
    By using minipic, compress 40m images will only cost 3 seconds. Compress ratio reach 70%~80%.

  • 💾 Cache control
    Minipic will start cache control by default. It will save images into the disk when compressing images for the first time.
    Then next time minipic will read images info directly from disk cache to speed up compression proccess.
    And aviod repeat compression.

  • 📷 Convert image types
    You can change image type when compressing images.

  • 🔎 Include/Exclude specific image types
    You can choose which image need to be compressed.

  • 📂 Public folder support (Version≥1.1) Support compress images in public folder.

📦 Install

npm install vite-plugin-minipic -D

You can choose whatever pacakge manager as you like, recommend yarn or pnpm

❗❗❗ Install failed?

If you can't install, add following config in your .npmrc file.

registry="https://registry.npmmirror.com"
sharp_binary_host="https://npm.taobao.org/mirrors/sharp"
sharp_libvips_binary_host="https://npm.taobao.org/mirrors/sharp-libvips"

other questions, see QA

💻 Usage

Basic Usage

in vite.config.js

import minipic from 'vite-plugin-minipic'
export default defineConfig({
	plugins: [minipic()]
})

Custom Usage

in vite.config.js

import minipic from 'vite-plugin-minipic'
export default defineConfig({
	plugins: [
		minipic({
			sharpOptions: {
				png: {
					quality: 70
				},
				jpeg: {
					quality: 70
				}
			},
			convert: [
				{ from: 'png', to: 'jpg' },
				{ from: 'jpg', to: 'webp' },
				{ from: 'jpeg', to: 'jpg' }
			],
			cache: false,
			exclude: [],
			include: []
		})
	]
})

🔨 Options

param type default value detail
sharpOptions Object sharpOptions image compression options,the same config with sharp.js.For more detail config, see sharp.js.
convert Object convert You can change image type by this option.from is the original image typeto is the compressed image type
cache Boolean true This option will speed up compression process by saving imges in the disk. Set false to disable this function.
exclude string or string[] [] By setting this option, you can exclude files that you don't want to compress。Set exclude as string array,like exclude:['pic1.jpg','pic2.jpg'] to exclude specific files. If set exlude as string,like exclude:'.jpg', it will be regarded as a RegExp to exlude all .jpg files. If exclude and include both have value, include will be invalid
include string or string[] [] By setting this option, you can include files that you want to compress。Set exclude as string array,like include:['pic1.jpg','pic2.jpg'] to include specific files. If set exlude as string,like include:'.jpg', it will be regarded as a RegExp to include all .jpg files. If exclude and include both have value, include will be invalid

sharpOptions

image compression options,the same config with sharp.js.
For more detail config, see sharp.js.

sharpOptions: {
	avif: {
		quality: 75
	},
	jpeg: {
		quality: 75
	},
	jpg: {
		quality: 75
	},
	png: {
		quality: 75
	},
	webp: {
		quality: 75
	},
	gif:{}
}

convert

You can change image type by this option.
from is the original image type
to is the compressed image type

default:

convert: [
	{ from: 'png', to: 'png' },
	{ from: 'jpg', to: 'jpeg' },
	{ from: 'jpeg', to: 'webp' },
	{ from: 'avif', to: 'avif' }
]

Examples

Run examples

yarn vue3

or

npm run vue3

Current Support image types

avif、jpeg、jpg、png、webp、gif
more image type will be support in later version

TODO

  • cache function
  • exclude compress file function
  • include compress file function
  • Public folder images support(version>1.1)
  • Support more image types(svg……)
  • Exlcude and include function in directory level.

License

MIT

Inspiration

vite-plugin-imagemin
unplugin-imagemin

About

Based on sharp.js, compress your image before vite generate bundle. It's easy and fast! 基于sharp.js的vite图片压缩插件,又快又好用!

Topics

Resources

Stars

Watchers

Forks