{"id":16223595,"url":"https://github.com/baiwusanyu-c/unplugin-img-compress","last_synced_at":"2025-04-09T09:08:30.493Z","repository":{"id":65859079,"uuid":"585492286","full_name":"baiwusanyu-c/unplugin-img-compress","owner":"baiwusanyu-c","description":"🔥 Image compression plugin based on tinypng","archived":false,"fork":false,"pushed_at":"2024-12-03T05:12:59.000Z","size":3142,"stargazers_count":55,"open_issues_count":10,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T20:14:37.596Z","etag":null,"topics":["compression-img","compression-library","esbuild","rollup","unplugin","vite","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baiwusanyu-c.png","metadata":{"files":{"readme":"README.ZH-CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-05T10:02:53.000Z","updated_at":"2025-01-17T16:07:01.000Z","dependencies_parsed_at":"2024-12-16T18:30:31.605Z","dependency_job_id":"d2fb4a78-1828-4d2b-aaf7-ed6904bba570","html_url":"https://github.com/baiwusanyu-c/unplugin-img-compress","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baiwusanyu-c%2Funplugin-img-compress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baiwusanyu-c%2Funplugin-img-compress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baiwusanyu-c%2Funplugin-img-compress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baiwusanyu-c%2Funplugin-img-compress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baiwusanyu-c","download_url":"https://codeload.github.com/baiwusanyu-c/unplugin-img-compress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compression-img","compression-library","esbuild","rollup","unplugin","vite","webpack"],"created_at":"2024-10-10T12:19:21.549Z","updated_at":"2025-04-09T09:08:30.473Z","avatar_url":"https://github.com/baiwusanyu-c.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[English](https://github.com/baiwusanyu-c/unplugin-img-compress/blob/master/README.md) | 中文\n\n# unplugin-img-compress\n基于 tinypng 的图片压缩插件\n```shell\n✨ : unplugin-img-compress running...[runtime dev]\n✔ : compression complete [test1.png]\n✅ : [74.31 KB] -\u003e [66.64 KB]\n✔ : compression complete [test2.png]\n✅ : [86.52 KB] -\u003e [76.64 KB]\n```\n\n## Feature(特性)\n\n* 🌈 支持全平台打包工具构建\n* 🌌 支持打包时对产物中的图片进行压缩\n* 🌊 支持开发时对图片进行压缩\n* ⛰ 支持格式 png|jpg|jpeg|webp\n\n## Install(安装)\n\n```bash\nnpm i unplugin-img-compress -D\n```\n或\n```bash\nyarn add unplugin-img-compress -D\n```\n或\n```bash\npnpm add unplugin-img-compress -D\n```\n\n## Usage(使用)\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\n\n```ts\n// vite.config.ts\nimport { resolve } from 'path'\nimport { defineConfig } from 'vite'\nimport { viteImgCompress } from 'unplugin-img-compress'\nimport type { PluginOption } from 'vite'\nexport default defineConfig({\n  plugins: [\n    viteImgCompress({\n      APIKey: 'XXXXXXXXXXXXXXXXXXXXXXXXX',\n      dir: `${resolve()}/assets`,\n      runtime: 'build',\n      mode: 'once',\n    }) as PluginOption,\n  ],\n})\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\n\n```ts\n// rollup.config.js\nimport { resolve } from 'path'\nimport { rollupImgCompress } from 'unplugin-img-compress'\nexport default {\n  plugins: [\n    rollupImgCompress({\n      APIKey: 'XXXXXXXXXXXXXXXXXXXXXXXXX',\n      dir: `${resolve()}/assets`,\n      runtime: 'build',\n      mode: 'once',\n    }),\n  ],\n}\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-img-compress').webpackImgCompress({ /* options */ }),\n  ],\n}\n```\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('unplugin-img-compress').webpackImgCompress({ /* options */ }),\n    ],\n  },\n}\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport { esbuildImgCompress } from 'unplugin-img-compress'\n\nbuild({\n  plugins: [esbuildImgCompress()],\n})\n```\n\u003c/details\u003e\n\n## Option(配置)\n\n```typescript\nexport interface CompressOption{\n  APIKey: string\n  dir: string | string[]\n  runtime: 'build' | 'dev'\n  mode: 'watch' | 'once'\n}\n```\n\n### APIKey\n调用 tinypng Api 的秘钥 ([See: https://tinypng.com/developers](https://tinypng.com/developers))\n\n### dir\n需要压缩的图片目标文件路径, e.g. `'src/assets/img'`\n\n### runtime\n指定插件是以 `cli` 的形式运行还是打包工具的插件运行，当他设置为`dev`时，在打包工具打包时（比如vite），它将不再运行\n如果你想在打包时对图片进行压缩，这里请设置为 `build`, \n如果你想在开发期间以`cli`的形式独立运行来压缩图片，请设置为`dev`\n\n### mode\n指定是否开启文件监听，当 `mode` 为 `once`时，`unplugin-img-compress`执行一次则会停止，\n当 `mode` 为 `watch`时，`unplugin-img-compress`会监听目标图片文件夹内图片的变化，对新增的图片进行自动压缩。\n\n## Cli Mode(脚本模式)\n`unplugin-img-compress`还提供了一种脚本的运行方式（灵感来自于[easy-tinypng-cli](https://github.com/sudongyuer/easy-tinypng-cli)）\n### Usage(使用)\n1.配置文件`unplugin-img-compress.config.ts`(支持'.ts', '.mts', '.cts', '.js', '.mjs', '.cjs', '.json')\n```typescript\nexport default {\n  APIKey: 'xxxxx',\n  dir: `/src/runtime-dev-assets`,\n  runtime: 'dev',\n  mode: 'watch',\n}\n```\n它的配置没有什么不同, 只不过这里你需要将 `runtime` 设置为 `dev`\n\n2.运行脚本\n```shell\npnpm unp-img\n✨ : unplugin-img-compress running...[runtime dev]\n✔ : compression complete [test1.png]\n✅ : [74.31 KB] -\u003e [66.64 KB]\n✔ : compression complete [test2.png]\n✅ : [86.52 KB] -\u003e [76.64 KB]\n```\n当脚本运行完成后，会在项目根目录创建一个记录文件`IMG_TINIFY_RECORD.json`\n\n### Option\n\n#### -c | --clear\n在脚本每次运行时删除记录文件`IMG_TINIFY_RECORD.json`\n```shell\npnpm unp-img -c|--clear\n```\n### Notice(注意)\n在 `mode` 设置为 `watch` 时，`unplugin-img-compress` 只会监听文件的新增和删除，\n当文件新增时，会更新记录文件`IMG_TINIFY_RECORD.json`并对新增的文件进行压缩。当文件删除时，\n则只会更新记录文件。我不推荐你在脚本执行期间（`mode = watch`）修改文件名，因为`unplugin-img-compress`内部对文件的监听使用\n`chokidar`,文件名的修改会触发`change` 与 `add` 事件，而我无法知道文件修改前后的信息，因此不能正确的更新或准确的区分文件是否需要压缩。\n因此我更推荐在项目外对文件重命名后再放入项目。\n\n## Thanks(感谢)\n* [tinypng](https://tinypng.com/)\n* [easy-tinypng-cli](https://github.com/sudongyuer/easy-tinypng-cli)\n* [unplugin](https://github.com/unjs/unplugin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaiwusanyu-c%2Funplugin-img-compress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaiwusanyu-c%2Funplugin-img-compress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaiwusanyu-c%2Funplugin-img-compress/lists"}