gem-hunter
Language: TypeScript
🔥 Image compression plugin based on tinypng
English | 中文
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]
npm i unplugin-img-compress -D
Or
yarn add unplugin-img-compress -D
Or
pnpm add unplugin-img-compress -D
// 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()], })
export interface CompressOption{ APIKey: string dir: string | string[] runtime: 'build' | 'dev' mode: 'watch' | 'once' }
The secret key to call tinypng Api (See: https://tinypng.com/developers)
The image target file path that needs to be compressed. e.g. 'src/assets/img'
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
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.
unplugin-img-compress also provides a way to run scripts（inspired by easy-tinypng-cli）
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
Delete the record file IMG_TINIFY_RECORD.json every time the script runs
pnpm unp-img -c|--clearWhen 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.