feat: support svgo2

vbenjs · Jul 5, 2021 · aa81b70 · aa81b70
1 parent 689ed98
commit aa81b70
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 456 deletions.
diff --git a/README.md b/README.md
@@ -62,23 +62,21 @@ export default () => {
         optipng: {
           optimizationLevel: 7,
         },
-        webp: {
-          quality: 75,
-        },
         mozjpeg: {
-          quality: 65,
+          quality: 20,
         },
         pngquant: {
-          quality: [0.65, 0.9],
+          quality: [0.8, 0.9],
           speed: 4,
         },
         svgo: {
           plugins: [
             {
-              removeViewBox: false,
+              name: 'removeViewBox',
             },
             {
-              removeEmptyAttrs: false,
+              name: 'removeEmptyAttrs',
+              active: false,
             },
           ],
         },

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -62,23 +62,21 @@ export default () => {
         optipng: {
           optimizationLevel: 7,
         },
-        webp: {
-          quality: 75,
-        },
         mozjpeg: {
-          quality: 65,
+          quality: 20,
         },
         pngquant: {
-          quality: [0.65, 0.9],
+          quality: [0.8, 0.9],
           speed: 4,
         },
         svgo: {
           plugins: [
             {
-              removeViewBox: false,
+              name: 'removeViewBox',
             },
             {
-              removeEmptyAttrs: false,
+              name: 'removeEmptyAttrs',
+              active: false,
             },
           ],
         },

diff --git a/example/package.json b/example/package.json
@@ -15,6 +15,6 @@
     "@vue/compiler-sfc": "^3.0.11",
     "cross-env": "^7.0.3",
     "typescript": "^4.2.4",
-    "vite": "^2.2.4"
+    "vite": "^2.4.0"
   }
 }
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -20,7 +20,7 @@ export default (): UserConfigExport => {
           optimizationLevel: 7,
         },
         mozjpeg: {
-          quality: 8,
+          quality: 20,
         },
         pngquant: {
           quality: [0.8, 0.9],
@@ -29,10 +29,11 @@ export default (): UserConfigExport => {
         svgo: {
           plugins: [
             {
-              removeViewBox: false,
+              name: 'removeViewBox',
             },
             {
-              removeEmptyAttrs: false,
+              name: 'removeEmptyAttrs',
+              active: false,
             },
           ],
         },

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -442,6 +442,11 @@ colorette@^1.2.1:
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
   integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
 
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
 consolidate@^0.16.0:
   version "0.16.0"
   resolved "https://registry.npmjs.org/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
@@ -499,10 +504,10 @@ emojis-list@^3.0.0:
   resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-esbuild@^0.9.3:
-  version "0.9.7"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
-  integrity sha512-VtUf6aQ89VTmMLKrWHYG50uByMF4JQlVysb8dmg6cOgW8JnFCipmz7p+HNBl+RR3LLCuBxFGVauAe2wfnF9bLg==
+esbuild@^0.12.8:
+  version "0.12.14"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.12.14.tgz#43157dbd0b36d939247d4eb4909a4886ac40f82e"
+  integrity sha512-z8p+6FGiplR7a3pPonXREbm+8IeXjBGvDpVidZmGB/AJMsJSfGCU+n7KOMCazA9AwvagadRWBhiKorC0w9WJvw==
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
@@ -514,7 +519,7 @@ estree-walker@^2.0.1:
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
   integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
 
-fsevents@~2.3.1:
+fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -578,10 +583,10 @@ indexes-of@^1.0.1:
   resolved "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
-is-core-module@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
-  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+is-core-module@^2.2.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
+  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
   dependencies:
     has "^1.0.3"
 
@@ -669,6 +674,11 @@ nanoid@^3.1.20:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
   integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
 
+nanoid@^3.1.23:
+  version "3.1.23"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
+  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+
 path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
@@ -750,26 +760,26 @@ postcss@^8.1.10:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
-postcss@^8.2.1:
-  version "8.2.4"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz#20a98a39cf303d15129c2865a9ec37eda0031d04"
-  integrity sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==
+postcss@^8.3.5:
+  version "8.3.5"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
+  integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
   dependencies:
-    colorette "^1.2.1"
-    nanoid "^3.1.20"
-    source-map "^0.6.1"
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map-js "^0.6.2"
 
 regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
-resolve@^1.19.0:
-  version "1.19.0"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
-  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+resolve@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
   dependencies:
-    is-core-module "^2.1.0"
+    is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
 rollup@^2.38.5:
@@ -801,6 +811,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -858,17 +873,17 @@ util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-vite@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.npmjs.org/vite/-/vite-2.2.4.tgz#8f9cc85aacab04c850085894b086c8717f12ed16"
-  integrity sha512-vnIwSNci+phFMp6krhy+FbYzKL0R67Sdt9mVZ96S27AewrApSJjTqncJcalk8sf60BgcbW4+1C6DFIWkxquO9g==
+vite@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.4.0.tgz#a591e4f2c996ae9a044093f629b418069629ca16"
+  integrity sha512-FR+1hCyGt8i+ijMe9z4tIfUQ7BQThxGevp3IlmdXDBSJEPjbeDznbuJa/QVzXw2Mpxh7KCmveVI082h8nzcCNw==
   dependencies:
-    esbuild "^0.9.3"
-    postcss "^8.2.1"
-    resolve "^1.19.0"
+    esbuild "^0.12.8"
+    postcss "^8.3.5"
+    resolve "^1.20.0"
     rollup "^2.38.5"
   optionalDependencies:
-    fsevents "~2.3.1"
+    fsevents "~2.3.2"
 
 vue@^3.0.11:
   version "3.0.11"

diff --git a/package.json b/package.json
@@ -35,20 +35,22 @@
   "dependencies": {
     "@types/imagemin": "^7.0.0",
     "@types/imagemin-gifsicle": "^7.0.0",
+    "@types/imagemin-jpegtran": "^5.0.0",
     "@types/imagemin-mozjpeg": "^8.0.0",
     "@types/imagemin-optipng": "^5.2.0",
     "@types/imagemin-svgo": "^9.0.0",
     "@types/imagemin-webp": "^5.1.1",
+    "@types/svgo": "^2.3.1",
     "chalk": "^4.1.1",
     "debug": "^4.3.2",
-    "esbuild": "^0.11.20",
     "fs-extra": "^10.0.0",
     "imagemin": "^7.0.1",
     "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-optipng": "^8.0.0",
     "imagemin-pngquant": "^9.0.2",
-    "imagemin-svgo": "^8.0.0",
+    "imagemin-svgo": "^9.0.0",
     "imagemin-webp": "^6.0.0"
   },
   "peerDependencies": {
@@ -61,11 +63,9 @@
   "devDependencies": {
     "@types/chalk": "^2.2.0",
     "@types/debug": "^4.1.5",
-    "@types/es-module-lexer": "^0.3.0",
     "@types/fs-extra": "^9.0.11",
-    "@types/node": "^15.0.2",
+    "@types/node": "^16.0.0",
     "conventional-changelog-cli": "^2.1.1",
-    "ini": "^2.0.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "tsup": "^4.10.1",

diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,7 @@ import type { Plugin, ResolvedConfig } from 'vite';
 import type { VitePluginImageMin } from './types';
 import path from 'path';
 import { normalizePath } from 'vite';
-import { isNotFalse, readAllFile, isBoolean, isRegExp, isFunction } from './utils';
+import { isNotFalse, readAllFile, isBoolean, isRegExp, isFunction, isObject } from './utils';
 import fs from 'fs-extra';
 import chalk from 'chalk';
 import { debug as Debug } from 'debug';
@@ -14,6 +14,8 @@ import imageminOptPng from 'imagemin-optipng';
 import imageminJpeg from 'imagemin-mozjpeg';
 import imageminSvgo from 'imagemin-svgo';
 import imageminWebp from 'imagemin-webp';
+import imageminJpegTran from 'imagemin-jpegtran';
+import { extendDefaultPlugins } from 'svgo';
 
 const debug = Debug('vite-plugin-imagemin');
 
@@ -156,10 +158,11 @@ function getImageminPlugins(options: VitePluginImageMin = {}): imagemin.Plugin[]
   const {
     gifsicle = true,
     webp = false,
-    mozjpeg = true,
-    pngquant = true,
+    mozjpeg = false,
+    pngquant = false,
     optipng = true,
     svgo = true,
+    jpegTran = true,
   } = options;
 
   const plugins: imagemin.Plugin[] = [];
@@ -191,6 +194,10 @@ function getImageminPlugins(options: VitePluginImageMin = {}): imagemin.Plugin[]
   if (isNotFalse(svgo)) {
     debug('svgo:', true);
     const opt = isBoolean(svgo) ? undefined : svgo;
+
+    if (opt !== null && isObject(opt) && Reflect.has(opt, 'plugins')) {
+      (opt as any).plugins = extendDefaultPlugins((opt as any).plugins);
+    }
     plugins.push(imageminSvgo(opt));
   }
 
@@ -199,5 +206,11 @@ function getImageminPlugins(options: VitePluginImageMin = {}): imagemin.Plugin[]
     const opt = isBoolean(webp) ? undefined : webp;
     plugins.push(imageminWebp(opt));
   }
+
+  if (isNotFalse(jpegTran)) {
+    debug('webp:', true);
+    const opt = isBoolean(jpegTran) ? undefined : jpegTran;
+    plugins.push(imageminJpegTran(opt));
+  }
   return plugins;
 }
diff --git a/src/types.ts b/src/types.ts
@@ -4,9 +4,15 @@ import type { Options as MozjpegOptions } from 'imagemin-mozjpeg';
 import type { Options as OptipngOptions } from 'imagemin-optipng';
 import type { Options as PngquantOptions } from 'imagemin-pngquant';
 import type { Options as WebpOptions } from 'imagemin-webp';
+import type { Options as JpegOptions } from 'imagemin-jpegtran';
 
 type EnabledOptions<T> = T | false;
 
+// @ts-ignore
+export interface SvgOption extends SvgoOptions {
+  plugins: { name: string; active?: boolean }[];
+}
+
 export interface VitePluginImageMin {
   /**
    * Log compressed files and their compression ratios.
@@ -31,10 +37,10 @@ export interface VitePluginImageMin {
    * svg compression configuration
    * @default: {enabled:true}
    */
-  svgo?: EnabledOptions<SvgoOptions>;
+  svgo?: EnabledOptions<SvgOption>;
   /**
    * jpeg compression configuration
-   * @default: {enabled:true}
+   * @default: {enabled:false}
    */
   mozjpeg?: EnabledOptions<MozjpegOptions>;
   /**
@@ -44,12 +50,18 @@ export interface VitePluginImageMin {
   optipng?: EnabledOptions<OptipngOptions>;
   /**
    * png compression configuration
-   * @default: {enabled:true}
+   * @default: {enabled:false}
    */
   pngquant?: EnabledOptions<PngquantOptions>;
   /**
    * webp compression configuration
-   * @default: {enabled:true}
+   * @default: {enabled:false}
    */
   webp?: EnabledOptions<WebpOptions>;
+
+  /**
+   * jpeg compression configuration
+   * @default: {enabled:true}
+   */
+  jpegTran?: EnabledOptions<JpegOptions>;
 }
diff --git a/src/utils.ts b/src/utils.ts
@@ -7,6 +7,10 @@ export const isBoolean = (arg: unknown): arg is boolean => {
   return typeof arg === 'boolean';
 };
 
+export const isObject = (arg: unknown): arg is boolean => {
+  return typeof arg === 'object';
+};
+
 export const isNotFalse = (arg: unknown): arg is boolean => {
   return !(isBoolean(arg) && !arg);
 };