unplugin-img-compress
v1.4.1
Published
🔥 Image compression plugin based on tinypng
Downloads
77
Maintainers
Readme
English | 中文
unplugin-img-compress
Image compression plugin based on tinypng
✨ : unplugin-img-compress running...[runtime dev]
✔ : compression complete [test1.png]
✅ : [74.31 KB] -> [66.64 KB]
✔ : compression complete [test2.png]
✅ : [86.52 KB] -> [76.64 KB]
Feature
- 🌈 Compatible with multiple bundled platforms(vite、rollup、esbuild、webpack)
- 🌌 Support for compressing pictures in the product when packaging
- 🌊 Support image compression during development
- ⛰ Support png|jpg|jpeg|webp
Install
npm i unplugin-img-compress -D
Or
yarn add unplugin-img-compress -D
Or
pnpm add unplugin-img-compress -D
Usage
// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteImgCompress } from 'unplugin-img-compress'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
viteImgCompress({
APIKey: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
dir: `${resolve()}/assets`,
runtime: 'build',
mode: 'once',
}) as PluginOption,
],
})
// rollup.config.js
import { resolve } from 'path'
import { rollupImgCompress } from 'unplugin-img-compress'
export default {
plugins: [
rollupImgCompress({
APIKey: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
dir: `${resolve()}/assets`,
runtime: 'build',
mode: 'once',
}),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-img-compress').webpackImgCompress({ /* options */ }),
],
}
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-img-compress').webpackImgCompress({ /* options */ }),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildImgCompress } from 'unplugin-img-compress'
build({
plugins: [esbuildImgCompress()],
})
Option
export interface CompressOption{
APIKey: string
dir: string | string[]
runtime: 'build' | 'dev'
mode: 'watch' | 'once'
}
APIKey
The secret key to call tinypng Api (See: https://tinypng.com/developers)
dir
The image target file path that needs to be compressed. e.g. 'src/assets/img'
runtime
Specifies whether the plug-in is run in the form of cli
or a plug-in of a packaging tool.
When it is set to dev
, it will no longer run when the packaging tool is packaged (such as vite).
If you want to compress the image when packaging, please set it to build
,
If you want to run independently in the form of cli
to compress images during development,
please set it to dev
mode
Specifies whether to enable file monitoring. When mode
is once
,unplugin-img-compress
will stop after executing once.
When mode
is watch
, unplugin-img-compress
will monitor the changes of the images in the target image folder,
and automatically compress the newly added images.
Cli Mode
unplugin-img-compress
also provides a way to run scripts(inspired by easy-tinypng-cli)
Usage
1.Configuration file unplugin-img-compress.config.ts
(supports '.ts', '.mts', '.cts', '.js', '.mjs', '.cjs', '.json')
export default {
APIKey: 'xxxxx',
dir: `/src/runtime-dev-assets`,
runtime: 'dev',
mode: 'watch',
}
Its configuration is no different, except here you need to set runtime
to dev
2.run script
pnpm unp-img
✨ : unplugin-img-compress running...[runtime dev]
✔ : compression complete [test1.png]
✅ : [74.31 KB] -> [66.64 KB]
✔ : compression complete [test2.png]
✅ : [86.52 KB] -> [76.64 KB]
When the script finishes running, a record file IMG_TINIFY_RECORD.json
will be created in the project root directory
Option
-c | --clear
Delete the record file IMG_TINIFY_RECORD.json
every time the script runs
pnpm unp-img -c|--clear
Notice
When mode
is set to watch
, unplugin-img-compress
will only monitor the addition and deletion of files.
When a new file is added, the record file IMG_TINIFY_RECORD.json
will be updated and the newly added file will be compressed.
When a file is deleted, then only the record file will be updated.
I don't recommend you to modify the file name during script execution (mode = watch
),
because unplugin-img-compress
internally monitors the file usingchokidar
,
the modification of the file name will trigger change
and add
events,
and I have no way of knowing the information before and after the modification of the file,
so I cannot update it correctly or accurately distinguish whether the file needs to be compressed.
Therefore, I recommend renaming the files outside the project before putting them into the project.