feat: add image minimizer webpack plugin

config/rspack.config.js

@@ -13,6 +13,7 @@ const {
 const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 // Load the current .env and expand it
 const parsedEnv = dotenvExpand.expand(dotenv.config());
@@ -215,13 +216,51 @@ module.exports = (webpackEnv, argv) => {
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/],
+              use: [
+                {
+                  // Compress images as described in https://rspack.dev/guide/features/asset-module#using-optimizers-as-loaders
+                  loader: ImageMinimizerPlugin.loader,
+                  options: {
+                    minimizer: {
+                      implementation: ImageMinimizerPlugin.sharpMinify,
+                      options: {
+                        encodeOptions: {
+                          // https://sharp.pixelplumbing.com/api-output
+                        },
+                      },
+                    },
+                  },
+                },
+              ],
               type: 'asset',
             },
             {
               test: /\.svg(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
               // css-loader is messing up SVGs: https://github.com/webpack/webpack/issues/13835
               // Pin css-loader and always load them as file-resource.
+              use: [
+                {
+                  // Compress images as described in https://rspack.dev/guide/features/asset-module#using-optimizers-as-loaders
+                  loader: ImageMinimizerPlugin.loader,
+                  options: {
+                    minimizer: {
+                      implementation: ImageMinimizerPlugin.svgoMinify,
+                      options: {
+                        encodeOptions: {
+                          // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
+                          multipass: true,
+                          plugins: [
+                            // set of built-in plugins enabled by default
+                            // see: https://github.com/svg/svgo#default-preset
+                            'preset-default',
+                          ],
+                        },
+                      },
+                    },
+                  },
+                },
+              ],
               type: 'asset/resource',
             },
             {

package.json

@@ -73,6 +73,7 @@
     "html-loader": "~5.1.0",
     "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
+    "image-minimizer-webpack-plugin": "^4.1.3",
     "jest": "^27.5.1",
     "jest-raw-loader": "~1.0.1",
     "jest-resolve": "^27.5.1",
@@ -88,7 +89,9 @@
     "rimraf": "~6.0.1",
     "sass-embedded": "~1.85.0",
     "sass-loader": "^16.0.4",
+    "sharp": "^0.33.5",
     "shx": "~0.3.4",
+    "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "ts-checker-rspack-plugin": "^1.1.1",
     "ts-node": "^10.9.2",