A tool for fast secondary compression of images.
Inspired by easy-tinypng-cli and vite-plugin-imagemin
In the daily production mode, it is always necessary to compress a large number of image resources.
- When using
vite-plugin-imagemin
, it has to be recompressed every time you build, which I think is unnecessary. - When using
easy-tinypng-cli
, it needs to be connected to the Internet, and there is a limit of 500, which cannot meet a large number of processing.
so, a compression tool that can be locally unlimited and can avoid duplication of work is needed.
# pnpm
pnpm install fast-imagemin-cli -D
# npm
npm install fast-imagemin-cli -D
# yarn
yarn add fast-imagemin-cli -D
- Feat⭐: Added the function of backing up the original image
(The scheme is extracted to vite-plugin-imagemin)
Because imagemin is not easy to install in China. Several solutions are now available
- Use yarn to configure in package.json (recommended)
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
- Use npm, add the following configuration to the computer host file
199.232.4.133 raw.githubusercontent.com
- Install with cnpm (not recommended)
fm.config.ts
or fm.config.json
- inclde(required): The image directory that needs to be compressed will be automatically traversed recursively.
- options: Imagemin configuration items
// fm.config.ts
import { defineFmConfig } from 'fast-imagemin-cli/support'
export default defineFmConfig({
include: ['./src/assets'], // string | string[]
backup: false, // backup origin image verison 0.1.0
options: {
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,
},
],
},
},
})
params | type | default | default |
---|---|---|---|
svgo | object or false |
- | See Options |
gifsicle | object or false |
- | See Options |
mozjpeg | object or false |
- | See Options |
optipng | object or false |
- | See Options |
pngquant | object or false |
- | See Options |
webp | object or false |
- | See Options |
// package.json
{
"scripts": {
"fm": "fm" // or "fm --force" forced compression
}
}
packages/playground
xlegex
You will find that one of the .png
files takes up to 76930
ms. If it takes so long each time, it will greatly affect the work efficiency.