From fd3c035348869183624934e4a067d03b9a733f6d Mon Sep 17 00:00:00 2001 From: fisker Date: Sun, 30 Jun 2024 01:31:49 +0800 Subject: [PATCH 1/4] Rename --- index.js | 2 +- package.json | 12 ++++++------ readme.md | 28 ++++++++++++++-------------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/index.js b/index.js index 6653419..0955524 100644 --- a/index.js +++ b/index.js @@ -5,7 +5,7 @@ import {isSupporttedImage, squooshImages} from './squoosh.js' * @type {import('vite').Plugin} */ const vitePluginImageSquoosh = { - name: 'vite-plugin-image-squoosh', + name: 'vite-plugin-image-minify', apply: 'build', async generateBundle(_options, bundle) { /** @type {import('vite').Rollup.OutputAsset[]} */ diff --git a/package.json b/package.json index b56118c..8eee6af 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "vite-plugin-image-squoosh", + "name": "vite-plugin-image-minify", "version": "0.0.1", - "description": "Vite plugin to run squoosh on images.", - "homepage": "https://github.com/fisker/vite-plugin-image-squoosh#readme", + "description": "Vite plugin to minify images.", + "homepage": "https://github.com/fisker/vite-plugin-image-minify#readme", "bugs": { - "url": "https://github.com/fisker/vite-plugin-image-squoosh/issues" + "url": "https://github.com/fisker/vite-plugin-image-minify/issues" }, - "repository": "fisker/vite-plugin-image-squoosh", - "funding": "https://github.com/fisker/vite-plugin-image-squoosh?sponsor=1", + "repository": "fisker/vite-plugin-image-minify", + "funding": "https://github.com/fisker/vite-plugin-image-minify?sponsor=1", "license": "MIT", "author": { "name": "fisker Cheung", diff --git a/readme.md b/readme.md index 325fd0d..3fa6003 100644 --- a/readme.md +++ b/readme.md @@ -1,37 +1,37 @@ -# vite-plugin-image-squoosh +# vite-plugin-image-minify [![Build Status][github_actions_badge]][github_actions_link] [![Coverage][coveralls_badge]][coveralls_link] [![Npm Version][package_version_badge]][package_link] [![MIT License][license_badge]][license_link] -[github_actions_badge]: https://img.shields.io/github/actions/workflow/status/fisker/vite-plugin-image-squoosh/continuous-integration.yml?branch=main&style=flat-square -[github_actions_link]: https://github.com/fisker/vite-plugin-image-squoosh/actions?query=branch%3Amain -[coveralls_badge]: https://img.shields.io/coveralls/github/fisker/vite-plugin-image-squoosh/main?style=flat-square -[coveralls_link]: https://coveralls.io/github/fisker/vite-plugin-image-squoosh?branch=main -[license_badge]: https://img.shields.io/npm/l/vite-plugin-image-squoosh.svg?style=flat-square -[license_link]: https://github.com/fisker/vite-plugin-image-squoosh/blob/main/license -[package_version_badge]: https://img.shields.io/npm/v/vite-plugin-image-squoosh.svg?style=flat-square -[package_link]: https://www.npmjs.com/package/vite-plugin-image-squoosh +[github_actions_badge]: https://img.shields.io/github/actions/workflow/status/fisker/vite-plugin-image-minify/continuous-integration.yml?branch=main&style=flat-square +[github_actions_link]: https://github.com/fisker/vite-plugin-image-minify/actions?query=branch%3Amain +[coveralls_badge]: https://img.shields.io/coveralls/github/fisker/vite-plugin-image-minify/main?style=flat-square +[coveralls_link]: https://coveralls.io/github/fisker/vite-plugin-image-minify?branch=main +[license_badge]: https://img.shields.io/npm/l/vite-plugin-image-minify.svg?style=flat-square +[license_link]: https://github.com/fisker/vite-plugin-image-minify/blob/main/license +[package_version_badge]: https://img.shields.io/npm/v/vite-plugin-image-minify.svg?style=flat-square +[package_link]: https://www.npmjs.com/package/vite-plugin-image-minify -> Vite plugin to run squoosh on images. +> Vite plugin to minify images. ## Install ```bash -yarn add vite-plugin-image-squoosh --dev +yarn add vite-plugin-image-minify --dev ``` ## Usage -Add `vite-plugin-image-squoosh` to your Vite config file. +Add `vite-plugin-image-minify` to your Vite config file. ```js -import vitePluginImageSquoosh from 'vite-plugin-image-squoosh' +import vitePluginImageMinify from 'vite-plugin-image-minify' export default { plugins: [ - vitePluginImageSquoosh(), + vitePluginImageMinify(), ], }, ``` From bfaf8527c31e3d788f8d8dadeb7747d66d3c5d37 Mon Sep 17 00:00:00 2001 From: fisker Date: Sun, 30 Jun 2024 01:57:14 +0800 Subject: [PATCH 2/4] Support minify SVG files --- __snapshots__/index.test.js.snap | 14 +++++++ fixtures/index.html | 10 ++--- fixtures/test.svg | 8 ++++ index.js | 65 ++++++++++++++++++++------------ index.test.js | 1 + lint-staged.config.cjs | 5 ++- package.json | 6 ++- squoosh.js | 4 +- svgo.js | 8 ++++ 9 files changed, 87 insertions(+), 34 deletions(-) create mode 100644 fixtures/test.svg create mode 100644 svgo.js diff --git a/__snapshots__/index.test.js.snap b/__snapshots__/index.test.js.snap index 448d88f..bce975f 100644 --- a/__snapshots__/index.test.js.snap +++ b/__snapshots__/index.test.js.snap @@ -44,5 +44,19 @@ exports[`Main 1`] = ` "size": "-1.93 MB (-1927535)", }, }, + { + "bundled": { + "name": "assets/test-B2O8Bsmy.svg", + "size": "41 B (41)", + }, + "original": { + "name": "test.svg", + "size": "181 B (181)", + }, + "saved": { + "percentage": "-77.35%", + "size": "-140 B (-140)", + }, + }, ] `; diff --git a/fixtures/index.html b/fixtures/index.html index a4fdc6b..d923a53 100644 --- a/fixtures/index.html +++ b/fixtures/index.html @@ -8,10 +8,10 @@
- - - - + + + +
- \ No newline at end of file + diff --git a/fixtures/test.svg b/fixtures/test.svg new file mode 100644 index 0000000..6ba8e2a --- /dev/null +++ b/fixtures/test.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/index.js b/index.js index 0955524..9408d55 100644 --- a/index.js +++ b/index.js @@ -1,38 +1,55 @@ import assert from 'node:assert/strict' -import {isSupporttedImage, squooshImages} from './squoosh.js' +import {isSupportedImage, squooshImages} from './squoosh.js' +import optimizeSvg from './svgo.js' + +async function minifyWithSquoosh(bundle) { + /** @type {import('vite').Rollup.OutputAsset[]} */ + const images = Object.values(bundle).filter( + (assetOrChunk) => + assetOrChunk.type === 'asset' && isSupportedImage(assetOrChunk.fileName), + ) + + if (images.length === 0) { + return + } + + const compressed = await squooshImages( + images.map((image) => ({content: image.source, name: image.fileName})), + ) + + for (const [index, image] of images.entries()) { + bundle[image.fileName].source = compressed[index] + } +} + +async function minifySvg(bundle) { + /** @type {import('vite').Rollup.OutputAsset[]} */ + const images = Object.values(bundle).filter( + (assetOrChunk) => + assetOrChunk.type === 'asset' && /\.svg$/i.test(assetOrChunk.fileName), + ) + + for (const {fileName: name, source: content} of images) { + bundle[name].source = optimizeSvg(content) + } +} /** * @type {import('vite').Plugin} */ -const vitePluginImageSquoosh = { +const vitePluginImageMinify = { name: 'vite-plugin-image-minify', apply: 'build', async generateBundle(_options, bundle) { - /** @type {import('vite').Rollup.OutputAsset[]} */ - const images = Object.entries(bundle) - .filter(([fileName, assetOrChunk]) => { - assert.equal(fileName, assetOrChunk.fileName, 'Unexpected asset') - return ( - assetOrChunk.type === 'asset' && - isSupporttedImage(assetOrChunk.fileName) - ) - }) - .map(([, image]) => image) - - if (images.length === 0) { - return + for (const [fileName, assetOrChunk] of Object.entries(bundle)) { + assert.equal(fileName, assetOrChunk.fileName, 'Unexpected asset') } - const compressed = await squooshImages( - images.map((image) => ({content: image.source, name: image.fileName})), - ) - - for (const [index, image] of images.entries()) { - bundle[image.fileName].source = compressed[index] - } + await minifyWithSquoosh(bundle) + await minifySvg(bundle) }, } -const createVitePluginImageSquoosh = () => vitePluginImageSquoosh +const createVitePluginImageMinify = () => vitePluginImageMinify -export default createVitePluginImageSquoosh +export default createVitePluginImageMinify diff --git a/index.test.js b/index.test.js index 1933d98..a6b3f61 100644 --- a/index.test.js +++ b/index.test.js @@ -17,6 +17,7 @@ async function runVite() { write: false, logLevel: 'warn', plugins: [vitePluginImageSquoosh()], + build: {assetsInlineLimit: 0}, }) const assets = buildResult.output diff --git a/lint-staged.config.cjs b/lint-staged.config.cjs index f74aa83..fd0944f 100644 --- a/lint-staged.config.cjs +++ b/lint-staged.config.cjs @@ -6,4 +6,7 @@ * */ -module.exports = require('@fisker/lint-staged-config') +module.exports = { + ...require('@fisker/lint-staged-config'), + '*.{css,htm,html,less,scss}': ['prettier --write'], +} diff --git a/package.json b/package.json index 8eee6af..0a4897d 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "exports": "./index.js", "files": [ "index.js", - "squoosh.js" + "squoosh.js", + "svgo.js" ], "scripts": { "clean": "run-p \"clean:*\"", @@ -42,7 +43,8 @@ "release": "runs-s lint test dist" }, "dependencies": { - "@frostoven/libsquoosh": "^0.4.8" + "@frostoven/libsquoosh": "^0.4.8", + "svgo": "3.3.2" }, "devDependencies": { "@fisker/eslint-config": "13.1.0", diff --git a/squoosh.js b/squoosh.js index 55c68dc..0514135 100644 --- a/squoosh.js +++ b/squoosh.js @@ -64,6 +64,6 @@ async function squooshImages(files) { return result } -const isSupporttedImage = (filename) => Boolean(getEncoder(filename)) +const isSupportedImage = (filename) => Boolean(getEncoder(filename)) -export {squooshImages, isSupporttedImage} +export {squooshImages, isSupportedImage} diff --git a/svgo.js b/svgo.js new file mode 100644 index 0000000..a13ba94 --- /dev/null +++ b/svgo.js @@ -0,0 +1,8 @@ +import {optimize} from 'svgo' + +function minify(content) { + const result = optimize(content) + return result.data +} + +export default minify From 94012f569186f2efa70ecf78107b9f3c7e51c29a Mon Sep 17 00:00:00 2001 From: fisker Date: Sun, 30 Jun 2024 01:58:48 +0800 Subject: [PATCH 3/4] Unpin `svgo` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0a4897d..0c7b4b7 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ }, "dependencies": { "@frostoven/libsquoosh": "^0.4.8", - "svgo": "3.3.2" + "svgo": "^3.3.2" }, "devDependencies": { "@fisker/eslint-config": "13.1.0", From 68e5504ccb5274fe757a42989fb07ec1a05f5954 Mon Sep 17 00:00:00 2001 From: fisker Date: Sun, 30 Jun 2024 02:04:56 +0800 Subject: [PATCH 4/4] Update fixture --- __snapshots__/index.test.js.snap | 28 +- fixtures/car-lite.svg | 482 +++++++++++++++++++++++++++++++ fixtures/index.html | 3 +- fixtures/test.svg | 8 - 4 files changed, 498 insertions(+), 23 deletions(-) create mode 100644 fixtures/car-lite.svg delete mode 100644 fixtures/test.svg diff --git a/__snapshots__/index.test.js.snap b/__snapshots__/index.test.js.snap index bce975f..f6dfd6c 100644 --- a/__snapshots__/index.test.js.snap +++ b/__snapshots__/index.test.js.snap @@ -2,6 +2,20 @@ exports[`Main 1`] = ` [ + { + "bundled": { + "name": "assets/car-lite-okg-C77L.svg", + "size": "12.9 kB (12907)", + }, + "original": { + "name": "car-lite.svg", + "size": "26.5 kB (26539)", + }, + "saved": { + "percentage": "-51.37%", + "size": "-13.6 kB (-13632)", + }, + }, { "bundled": { "name": "assets/demo-artwork-SS7dJ2TE.jpg", @@ -44,19 +58,5 @@ exports[`Main 1`] = ` "size": "-1.93 MB (-1927535)", }, }, - { - "bundled": { - "name": "assets/test-B2O8Bsmy.svg", - "size": "41 B (41)", - }, - "original": { - "name": "test.svg", - "size": "181 B (181)", - }, - "saved": { - "percentage": "-77.35%", - "size": "-140 B (-140)", - }, - }, ] `; diff --git a/fixtures/car-lite.svg b/fixtures/car-lite.svg new file mode 100644 index 0000000..7d888ca --- /dev/null +++ b/fixtures/car-lite.svg @@ -0,0 +1,482 @@ + + + + little red racing car + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + little red racing car + A little red, rounded racing car with plastic details and a drop shadow + 2013-05-02 + + + Onsemeliot + + + + + car + racing + red + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fixtures/index.html b/fixtures/index.html index d923a53..afafc4c 100644 --- a/fixtures/index.html +++ b/fixtures/index.html @@ -11,7 +11,8 @@ - + + diff --git a/fixtures/test.svg b/fixtures/test.svg deleted file mode 100644 index 6ba8e2a..0000000 --- a/fixtures/test.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - -