@rsbuild/plugin-image-compress 1.1.0 → 1.3.0

package/README.md

@@ -31,6 +31,8 @@ export default {
 };
 ```
 
+This plugin is compatible with both Rsbuild and Rspack. If you are using Rspack instead of Rsbuild, you can import the `ImageMinimizerPlugin` from the package, see [Rspack Usage](#rspack-usage).
+
 ## Default Compressors
 
 By default, the plugin will enable `jpeg`, `png`, `ico` image compressors, which are equivalent to the following two examples:
@@ -53,6 +55,7 @@ The plugin supports the following compressors:
 - `ico`: For ICO images.
 - `svg`: For SVG images.
 - `avif`: For AVIF images.
+- `webp`: For WEBP images.
 
 Only SVG are compressed by `svgo`, other compressors are compressed by `@napi-rs/image`.
 
@@ -73,6 +76,8 @@ pluginImageCompress([
   { use: "png", minQuality: 50 },
   // Options for @napi-rs/image `avif` method
   { use: "avif", quality: 80 },
+  // Options for @napi-rs/image `webp` method
+  { use: "webp", quality: 80 },
   // Options for svgo
   { use: 'svg', floatPrecision: 2 }
   // No options yet
@@ -98,6 +103,57 @@ For example, the `png` compressor will take precedence over the `pngLossless` co
 pluginImageCompress(["jpeg", "pngLossless", "ico", "png"]);
 ```
 
+## Rspack Usage
+
+The plugin is also compatible with Rspack.
+
+If you are using Rspack instead of Rsbuild, you can import the `ImageMinimizerPlugin` from the package, use it in the [optimization.minimizer](https://rspack.dev/config/optimization#optimizationminimizer) array.
+
+```ts
+// rspack.config.mjs
+import { ImageMinimizerPlugin } from "@rsbuild/plugin-image-compress";
+import { defineConfig } from "@rspack/cli";
+
+export default defineConfig({
+  mode: process.env.NODE_ENV === "production" ? "production" : "development",
+  optimization: {
+    minimizer: [
+      // Use `...` to preserve the default JS and CSS minimizers of Rspack
+      '...',
+      // Add the image minimizer plugins
+      new ImageMinimizerPlugin({
+        use: "jpeg",
+        test: /\.(?:jpg|jpeg)$/,
+      }),
+      new ImageMinimizerPlugin({
+        use: "png",
+        test: /\.png$/,
+        maxQuality: 50,
+      }),
+      new ImageMinimizerPlugin({
+        use: "avif",
+        test: /\.avif$/,
+        quality: 80,
+      }),
+      new ImageMinimizerPlugin({
+        use: "webp",
+        test: /\.webp$/,
+        quality: 80,
+      }),
+      new ImageMinimizerPlugin({
+        use: "svg",
+        test: /\.svg$/,
+        floatPrecision: 2,
+      }),
+      new ImageMinimizerPlugin({
+        use: "ico",
+        test: /\.(?:ico|icon)$/,
+      }),
+    ],
+  },
+});
+```
+
 ## License
 
 [MIT](./LICENSE).

package/dist/{shared/codecs.d.ts → codecs.d.ts}

@@ -1,9 +1,10 @@
-import type { Codec, Codecs } from '../types.js';
+import type { Codec, Codecs } from './types.js';
 export declare const jpegCodec: Codec<'jpeg'>;
 export declare const pngCodec: Codec<'png'>;
 export declare const pngLosslessCodec: Codec<'pngLossless'>;
 export declare const icoCodec: Codec<'ico'>;
 export declare const avifCodec: Codec<'avif'>;
+export declare const webpCodec: Codec<'webp'>;
 export declare const svgCodec: Codec<'svg'>;
 declare const codecs: Record<Codecs, Codec<any>>;
 export default codecs;

package/dist/index.cjs

@@ -1,40 +1,27 @@
 "use strict";
-// The require scope
 var __webpack_require__ = {};
-/************************************************************************/ // webpack/runtime/compat_get_default_export
 (()=>{
-    // getDefaultExport function for compatibility with non-ESM modules
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
         return getter;
     };
 })();
-// webpack/runtime/define_property_getters
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
         });
     };
 })();
-// webpack/runtime/has_own_property
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
-// webpack/runtime/make_namespace_object
 (()=>{
-    // define __esModule on exports
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -43,14 +30,13 @@ var __webpack_require__ = {};
         });
     };
 })();
-/************************************************************************/ var __webpack_exports__ = {};
-// ESM COMPAT FLAG
+var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
-// EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-    DEFAULT_OPTIONS: ()=>/* binding */ DEFAULT_OPTIONS,
-    pluginImageCompress: ()=>/* binding */ pluginImageCompress,
-    PLUGIN_IMAGE_COMPRESS_NAME: ()=>/* binding */ PLUGIN_IMAGE_COMPRESS_NAME
+    pluginImageCompress: ()=>pluginImageCompress,
+    PLUGIN_IMAGE_COMPRESS_NAME: ()=>PLUGIN_IMAGE_COMPRESS_NAME,
+    DEFAULT_OPTIONS: ()=>DEFAULT_OPTIONS,
+    ImageMinimizerPlugin: ()=>ImageMinimizerPlugin
 });
 const external_node_assert_namespaceObject = require("node:assert");
 var external_node_assert_default = /*#__PURE__*/ __webpack_require__.n(external_node_assert_namespaceObject);
@@ -98,6 +84,14 @@ const avifCodec = {
         test: /\.avif$/
     }
 };
+const webpCodec = {
+    async handler (buf, options) {
+        return new image_namespaceObject.Transformer(buf).webp(options.quality, options.signal);
+    },
+    defaultOptions: {
+        test: /\.webp$/
+    }
+};
 const svgCodec = {
     async handler (buf, options) {
         const result = external_svgo_default().optimize(buf.toString(), options);
@@ -107,16 +101,16 @@ const svgCodec = {
         test: /\.svg$/
     }
 };
-// biome-ignore lint/suspicious/noExplicitAny:allow any
-const codecs = {
+const codecs_codecs = {
     jpeg: jpegCodec,
     png: pngCodec,
     pngLossless: pngLosslessCodec,
     ico: icoCodec,
     svg: svgCodec,
-    avif: avifCodec
+    avif: avifCodec,
+    webp: webpCodec
 };
-/* ESM default export */ const shared_codecs = codecs;
+const codecs = codecs_codecs;
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -140,7 +134,7 @@ class ImageMinimizerPlugin {
             if (error instanceof Error) ret.error = error;
             return ret;
         };
-        const codec = shared_codecs[this.options.use];
+        const codec = codecs[this.options.use];
         if (!codec) compilation.errors.push(buildError(new Error(`Codec ${this.options.use} is not supported`)));
         const opts = {
             ...codec.defaultOptions,
@@ -148,10 +142,8 @@ class ImageMinimizerPlugin {
         };
         const handleAsset = async (name)=>{
             var _compilation_getAsset;
-            const info = null === (_compilation_getAsset = compilation.getAsset(name)) || void 0 === _compilation_getAsset ? void 0 : _compilation_getAsset.info;
+            const info = null == (_compilation_getAsset = compilation.getAsset(name)) ? void 0 : _compilation_getAsset.info;
             const fileName = name.split('?')[0];
-            // 1. Skip double minimize assets from child compilation
-            // 2. Test file by options (e.g. test, include, exclude)
             if ((null == info ? void 0 : info.minimized) || !matchObject(opts, fileName)) return;
             const asset = compilation.getAsset(name);
             if (!asset) return;
@@ -162,7 +154,7 @@ class ImageMinimizerPlugin {
             try {
                 if (!result) {
                     const input = inputSource.source();
-                    const buf = await codec.handler(external_node_buffer_namespaceObject.Buffer.from(input), opts);
+                    const buf = await codec.handler('string' == typeof input ? external_node_buffer_namespaceObject.Buffer.from(input) : input, opts);
                     result = {
                         source: new RawSource(buf)
                     };
@@ -183,7 +175,6 @@ class ImageMinimizerPlugin {
             compilation.hooks.processAssets.tapPromise({
                 name: this.name,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
-                // @ts-expect-error unsupported by Rspack
                 additionalAssets: true
             }, (assets)=>this.optimize(compiler, compilation, assets));
             compilation.hooks.statsPrinter.tap(this.name, (stats)=>{
@@ -202,7 +193,7 @@ const withDefaultOptions = (opt)=>{
     const options = 'string' == typeof opt ? {
         use: opt
     } : opt;
-    const { defaultOptions } = shared_codecs[options.use];
+    const { defaultOptions } = codecs[options.use];
     const ret = {
         ...defaultOptions,
         ...options
@@ -217,9 +208,7 @@ const DEFAULT_OPTIONS = [
 ];
 const castOptions = (args)=>{
     const head = args[0];
-    // expect [['png', { use: 'jpeg' }]]
     if (Array.isArray(head)) return head;
-    // expect ['png', { use: 'jpeg' }]
     const ret = [];
     for (const arg of args){
         external_node_assert_default()(!Array.isArray(arg));
@@ -233,7 +222,7 @@ const normalizeOptions = (options)=>{
     return normalized;
 };
 const PLUGIN_IMAGE_COMPRESS_NAME = 'rsbuild:image-compress';
-/** Options enable by default: {@link DEFAULT_OPTIONS} */ const pluginImageCompress = (...args)=>({
+const pluginImageCompress = (...args)=>({
         name: PLUGIN_IMAGE_COMPRESS_NAME,
         setup (api) {
             const opts = normalizeOptions(castOptions(args));
@@ -246,8 +235,16 @@ const PLUGIN_IMAGE_COMPRESS_NAME = 'rsbuild:image-compress';
             });
         }
     });
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.DEFAULT_OPTIONS = __webpack_exports__.DEFAULT_OPTIONS;
+exports.ImageMinimizerPlugin = __webpack_exports__.ImageMinimizerPlugin;
+exports.PLUGIN_IMAGE_COMPRESS_NAME = __webpack_exports__.PLUGIN_IMAGE_COMPRESS_NAME;
+exports.pluginImageCompress = __webpack_exports__.pluginImageCompress;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DEFAULT_OPTIONS",
+    "ImageMinimizerPlugin",
+    "PLUGIN_IMAGE_COMPRESS_NAME",
+    "pluginImageCompress"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
+import { ImageMinimizerPlugin } from './minimizer.js';
 import type { Codecs, Options } from './types.js';
 export type PluginImageCompressOptions = Options[];
 export declare const DEFAULT_OPTIONS: Codecs[];
@@ -7,5 +8,6 @@ export interface IPluginImageCompress {
     (options: Options[]): RsbuildPlugin;
 }
 export declare const PLUGIN_IMAGE_COMPRESS_NAME = "rsbuild:image-compress";
+export { ImageMinimizerPlugin };
 /** Options enable by default: {@link DEFAULT_OPTIONS} */
 export declare const pluginImageCompress: IPluginImageCompress;

package/dist/index.js

@@ -1,10 +1,10 @@
-import * as __WEBPACK_EXTERNAL_MODULE_node_assert__ from "node:assert";
-import * as __WEBPACK_EXTERNAL_MODULE_node_buffer__ from "node:buffer";
-import * as __WEBPACK_EXTERNAL_MODULE__napi_rs_image__ from "@napi-rs/image";
-import * as __WEBPACK_EXTERNAL_MODULE_svgo__ from "svgo";
+import node_assert from "node:assert";
+import { Buffer } from "node:buffer";
+import { Transformer, compressJpeg, losslessCompressPng, pngQuantize } from "@napi-rs/image";
+import svgo from "svgo";
 const jpegCodec = {
     handler (buf, options) {
-        return (0, __WEBPACK_EXTERNAL_MODULE__napi_rs_image__.compressJpeg)(buf, options);
+        return compressJpeg(buf, options);
     },
     defaultOptions: {
         test: /\.(?:jpg|jpeg)$/
@@ -12,7 +12,7 @@ const jpegCodec = {
 };
 const pngCodec = {
     handler (buf, options) {
-        return (0, __WEBPACK_EXTERNAL_MODULE__napi_rs_image__.pngQuantize)(buf, options);
+        return pngQuantize(buf, options);
     },
     defaultOptions: {
         test: /\.png$/
@@ -20,7 +20,7 @@ const pngCodec = {
 };
 const pngLosslessCodec = {
     handler (buf, options) {
-        return (0, __WEBPACK_EXTERNAL_MODULE__napi_rs_image__.losslessCompressPng)(buf, options);
+        return losslessCompressPng(buf, options);
     },
     defaultOptions: {
         test: /\.png$/
@@ -28,7 +28,7 @@ const pngLosslessCodec = {
 };
 const icoCodec = {
     handler (buf) {
-        return new __WEBPACK_EXTERNAL_MODULE__napi_rs_image__.Transformer(buf).ico();
+        return new Transformer(buf).ico();
     },
     defaultOptions: {
         test: /\.(?:ico|icon)$/
@@ -36,31 +36,39 @@ const icoCodec = {
 };
 const avifCodec = {
     handler (buf, options) {
-        return new __WEBPACK_EXTERNAL_MODULE__napi_rs_image__.Transformer(buf).avif(options);
+        return new Transformer(buf).avif(options);
     },
     defaultOptions: {
         test: /\.avif$/
     }
 };
+const webpCodec = {
+    async handler (buf, options) {
+        return new Transformer(buf).webp(options.quality, options.signal);
+    },
+    defaultOptions: {
+        test: /\.webp$/
+    }
+};
 const svgCodec = {
     async handler (buf, options) {
-        const result = __WEBPACK_EXTERNAL_MODULE_svgo__["default"].optimize(buf.toString(), options);
-        return __WEBPACK_EXTERNAL_MODULE_node_buffer__.Buffer.from(result.data);
+        const result = svgo.optimize(buf.toString(), options);
+        return Buffer.from(result.data);
     },
     defaultOptions: {
         test: /\.svg$/
     }
 };
-// biome-ignore lint/suspicious/noExplicitAny:allow any
-const codecs = {
+const codecs_codecs = {
     jpeg: jpegCodec,
     png: pngCodec,
     pngLossless: pngLosslessCodec,
     ico: icoCodec,
     svg: svgCodec,
-    avif: avifCodec
+    avif: avifCodec,
+    webp: webpCodec
 };
-/* ESM default export */ const shared_codecs = codecs;
+const codecs = codecs_codecs;
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -84,7 +92,7 @@ class ImageMinimizerPlugin {
             if (error instanceof Error) ret.error = error;
             return ret;
         };
-        const codec = shared_codecs[this.options.use];
+        const codec = codecs[this.options.use];
         if (!codec) compilation.errors.push(buildError(new Error(`Codec ${this.options.use} is not supported`)));
         const opts = {
             ...codec.defaultOptions,
@@ -92,10 +100,8 @@ class ImageMinimizerPlugin {
         };
         const handleAsset = async (name)=>{
             var _compilation_getAsset;
-            const info = null === (_compilation_getAsset = compilation.getAsset(name)) || void 0 === _compilation_getAsset ? void 0 : _compilation_getAsset.info;
+            const info = null == (_compilation_getAsset = compilation.getAsset(name)) ? void 0 : _compilation_getAsset.info;
             const fileName = name.split('?')[0];
-            // 1. Skip double minimize assets from child compilation
-            // 2. Test file by options (e.g. test, include, exclude)
             if ((null == info ? void 0 : info.minimized) || !matchObject(opts, fileName)) return;
             const asset = compilation.getAsset(name);
             if (!asset) return;
@@ -106,7 +112,7 @@ class ImageMinimizerPlugin {
             try {
                 if (!result) {
                     const input = inputSource.source();
-                    const buf = await codec.handler(__WEBPACK_EXTERNAL_MODULE_node_buffer__.Buffer.from(input), opts);
+                    const buf = await codec.handler('string' == typeof input ? Buffer.from(input) : input, opts);
                     result = {
                         source: new RawSource(buf)
                     };
@@ -127,7 +133,6 @@ class ImageMinimizerPlugin {
             compilation.hooks.processAssets.tapPromise({
                 name: this.name,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
-                // @ts-expect-error unsupported by Rspack
                 additionalAssets: true
             }, (assets)=>this.optimize(compiler, compilation, assets));
             compilation.hooks.statsPrinter.tap(this.name, (stats)=>{
@@ -146,12 +151,12 @@ const withDefaultOptions = (opt)=>{
     const options = 'string' == typeof opt ? {
         use: opt
     } : opt;
-    const { defaultOptions } = shared_codecs[options.use];
+    const { defaultOptions } = codecs[options.use];
     const ret = {
         ...defaultOptions,
         ...options
     };
-    (0, __WEBPACK_EXTERNAL_MODULE_node_assert__["default"])('test' in ret);
+    node_assert('test' in ret);
     return ret;
 };
 const DEFAULT_OPTIONS = [
@@ -161,12 +166,10 @@ const DEFAULT_OPTIONS = [
 ];
 const castOptions = (args)=>{
     const head = args[0];
-    // expect [['png', { use: 'jpeg' }]]
     if (Array.isArray(head)) return head;
-    // expect ['png', { use: 'jpeg' }]
     const ret = [];
     for (const arg of args){
-        (0, __WEBPACK_EXTERNAL_MODULE_node_assert__["default"])(!Array.isArray(arg));
+        node_assert(!Array.isArray(arg));
         ret.push(arg);
     }
     return ret;
@@ -177,7 +180,7 @@ const normalizeOptions = (options)=>{
     return normalized;
 };
 const PLUGIN_IMAGE_COMPRESS_NAME = 'rsbuild:image-compress';
-/** Options enable by default: {@link DEFAULT_OPTIONS} */ const pluginImageCompress = (...args)=>({
+const pluginImageCompress = (...args)=>({
         name: PLUGIN_IMAGE_COMPRESS_NAME,
         setup (api) {
             const opts = normalizeOptions(castOptions(args));
@@ -190,4 +193,4 @@ const PLUGIN_IMAGE_COMPRESS_NAME = 'rsbuild:image-compress';
             });
         }
     });
-export { DEFAULT_OPTIONS, PLUGIN_IMAGE_COMPRESS_NAME, pluginImageCompress };
+export { DEFAULT_OPTIONS, ImageMinimizerPlugin, PLUGIN_IMAGE_COMPRESS_NAME, pluginImageCompress };

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import type { Config as SvgoConfig } from 'svgo';
 export type OneOrMany<T> = T | T[];
 export interface WebpTransformOptions {
     quality?: number;
+    signal?: AbortSignal;
 }
 export interface CodecBaseOptions {
     jpeg: JpegCompressOptions;
@@ -12,6 +13,7 @@ export interface CodecBaseOptions {
     ico: Record<string, unknown>;
     svg: SvgoConfig;
     avif: AvifConfig;
+    webp: WebpTransformOptions;
 }
 export interface BaseCompressOptions<T extends Codecs> {
     use: T;

package/dist/{shared/utils.d.ts → utils.d.ts}

@@ -1,2 +1,2 @@
-import type { FinalOptions, Options } from '../types.js';
+import type { FinalOptions, Options } from './types.js';
 export declare const withDefaultOptions: (opt: Options) => FinalOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-image-compress",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "repository": "https://github.com/rspack-contrib/rsbuild-plugin-image-compress",
   "license": "MIT",
   "type": "module",
@@ -33,19 +33,19 @@
     ]
   },
   "dependencies": {
-    "@napi-rs/image": "^1.9.2",
+    "@napi-rs/image": "^1.11.1",
     "svgo": "^3.3.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@playwright/test": "^1.49.0",
-    "@rsbuild/core": "1.1.6",
-    "@rslib/core": "^0.1.1",
-    "@types/node": "^22.10.1",
+    "@playwright/test": "^1.54.1",
+    "@rsbuild/core": "1.4.12",
+    "@rslib/core": "^0.11.0",
+    "@types/node": "^22.17.0",
     "nano-staged": "^0.8.0",
-    "playwright": "^1.49.0",
-    "simple-git-hooks": "^2.11.1",
-    "typescript": "^5.7.2"
+    "playwright": "^1.54.1",
+    "simple-git-hooks": "^2.13.1",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "@rsbuild/core": "1.x"
@@ -55,7 +55,7 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@9.14.4",
+  "packageManager": "pnpm@10.14.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"