Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vbenjs/vite-plugin-imagemin
A vite plugin for compressing image assets.
https://github.com/vbenjs/vite-plugin-imagemin
Last synced: 14 days ago
JSON representation
A vite plugin for compressing image assets.
- Host: GitHub
- URL: https://github.com/vbenjs/vite-plugin-imagemin
- Owner: vbenjs
- License: mit
- Created: 2021-02-04T14:15:02.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-07T05:56:29.000Z (over 1 year ago)
- Last Synced: 2024-10-30T08:18:34.040Z (15 days ago)
- Language: TypeScript
- Size: 3.33 MB
- Stars: 212
- Watchers: 3
- Forks: 28
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-imagemin
**English** | [中文](./README.zh_CN.md)
[![npm][npm-img]][npm-url] [![node][node-img]][node-url]
A vite plugin for compressing image assets
## Install (yarn or npm)
**node version:** >=12.0.0
**vite version:** >=2.0.0
```
yarn add vite-plugin-imagemin -D
```
or
```
npm i vite-plugin-imagemin -D
```
### China installation note
Because imagemin is not easy to install in China. Several solutions are now available
1. Use yarn to configure in package.json (recommended)
```json
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
```
2. Use npm, add the following configuration to the computer host file
```bash
199.232.4.133 raw.githubusercontent.com
```
3. Install with cnpm (not recommended)
## Usage
- Configuration plugin in vite.config.ts
```ts
import viteImagemin from 'vite-plugin-imagemin'
export default () => {
return {
plugins: [
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 20,
},
pngquant: {
quality: [0.8, 0.9],
speed: 4,
},
svgo: {
plugins: [
{
name: 'removeViewBox',
},
{
name: 'removeEmptyAttrs',
active: false,
},
],
},
}),
],
}
}
```
### Options
| params | type | default | default |
| -------- | ------------------------------------- | ------- | ------------------------------------------------------------ |
| verbose | `boolean` | `true` | Whether to output the compressed result in the console |
| filter | `RegExp or (file: string) => boolean` | - | Specify which resources are not compressed |
| disable | `boolean` | `false` | Whether to disable |
| svgo | `object` or `false` | - | See [Options](https://github.com/svg/svgo/#what-it-can-do) |
| gifsicle | `object` or `false` | - | See [Options](https://github.com/imagemin/imagemin-gifsicle) |
| mozjpeg | `object` or `false` | - | See [Options](https://github.com/imagemin/imagemin-mozjpeg) |
| optipng | `object` or `false` | - | See [Options](https://github.com/imagemin/imagemin-optipng) |
| pngquant | `object` or `false` | - | See [Options](https://github.com/imagemin/imagemin-pngquant) |
| webp | `object` or `false` | - | See [Options](https://github.com/imagemin/imagemin-webp) |
## Example
**Run Example**
```bash
npm run dev:play
npm run dev:build
```
## Sample project
[Vben Admin](https://github.com/anncwb/vue-vben-admin)
## License
MIT
## Inspiration
[vite-plugin-compress](https://github.com/alloc/vite-plugin-compress)
[npm-img]: https://img.shields.io/npm/v/vite-plugin-imagemin.svg
[npm-url]: https://npmjs.com/package/vite-plugin-imagemin
[node-img]: https://img.shields.io/node/v/vite-plugin-imagemin.svg
[node-url]: https://nodejs.org/en/about/releases/