fix(imagemin): use image min as loader

RSPack does not support imagemin plugin
core-ds · Oct 29, 2024 · fe73e5d · fe73e5d
1 parent 9251a4a
commit fe73e5d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 40 deletions.
diff --git a/packages/arui-scripts/src/configs/config-extras/minimizers/imagemin/imagemin.ts b/packages/arui-scripts/src/configs/config-extras/minimizers/imagemin/imagemin.ts
@@ -1,46 +1,63 @@
 import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';
 
-import configs from '../../../app-configs';
+import { configs } from '../../../app-configs';
 
-export const getImageMin = () => {
+export function getImageMinLoader() {
     const { svg, gif, jpg, png } = configs.imageMinimizer ?? {};
     const doesAnyMinificationEnabled = svg?.enabled || gif?.enabled || jpg?.enabled || png?.enabled;
 
-    return [
-        doesAnyMinificationEnabled &&
-            new ImageMinimizerPlugin({
-                minimizer: {
-                    implementation: ImageMinimizerPlugin.imageminMinify,
-                    options: {
-                        plugins: [
-                            jpg?.enabled && [
-                                'mozjpeg',
-                                {
-                                    quality: jpg?.quality,
-                                    progressive: true,
-                                },
-                            ],
-                            png?.enabled && [
-                                'optipng',
-                                {
-                                    optimizationLevel: png?.optimizationLevel,
-                                    bitDepthReduction: png?.bitDepthReduction,
-                                    colorTypeReduction: png?.colorTypeReduction,
-                                    paletteReduction: png?.paletteReduction,
-                                    interlaced: png?.interlaced,
-                                },
-                            ],
-                            svg?.enabled && ['svgo'],
-                            gif?.enabled && [
-                                'gifsicle',
-                                {
-                                    optimizationLevel: gif?.optimizationLevel,
-                                    interlaced: true,
-                                },
-                            ],
-                        ].filter(Boolean),
+    if (!doesAnyMinificationEnabled) {
+        return false;
+    }
+
+    const loaderExtensions = [
+        svg?.enabled && 'svg',
+        gif?.enabled && 'gif',
+        jpg?.enabled && 'jpe?g',
+        png?.enabled && 'png',
+    ].filter(Boolean);
+
+    return {
+        test: new RegExp(`\\.(${loaderExtensions.join('|')})$`),
+        type: 'assets',
+        use: [
+            {
+                loader: ImageMinimizerPlugin.loader,
+                options: {
+                    minimizer: {
+                        implementation: ImageMinimizerPlugin.imageminMinify,
+                        options: {
+                            plugins: [
+                                jpg?.enabled && [
+                                    'mozjpeg',
+                                    {
+                                        quality: jpg?.quality,
+                                        progressive: true,
+                                    },
+                                ],
+                                png?.enabled && [
+                                    'optipng',
+                                    {
+                                        optimizationLevel: png?.optimizationLevel,
+                                        bitDepthReduction: png?.bitDepthReduction,
+                                        colorTypeReduction: png?.colorTypeReduction,
+                                        paletteReduction: png?.paletteReduction,
+                                        interlaced: png?.interlaced,
+                                    },
+                                ],
+                                svg?.enabled && ['svgo'],
+                                gif?.enabled && [
+                                    'gifsicle',
+                                    {
+                                        optimizationLevel: gif?.optimizationLevel,
+                                        interlaced: true,
+                                    },
+                                ],
+                            ].filter(Boolean),
+                        },
                     },
                 },
-            }),
-    ];
-};
+            },
+        ],
+    }
+}
diff --git a/packages/arui-scripts/src/configs/webpack.client.ts b/packages/arui-scripts/src/configs/webpack.client.ts
@@ -20,7 +20,7 @@ import { WebpackDeduplicationPlugin } from 'webpack-deduplication-plugin';
 import { AruiRuntimePlugin, getInsertCssRuntimeMethod } from '../plugins/arui-runtime';
 import { htmlTemplate } from '../templates/html.template';
 
-import { getImageMin } from './config-extras/minimizers';
+import { getImageMinLoader } from './config-extras/minimizers';
 import checkNodeVersion from './util/check-node-version';
 import getEntry, { Entry } from './util/get-entry';
 import { configs } from './app-configs';
@@ -63,7 +63,6 @@ function getMinimizeConfig(mode: 'dev' | 'prod') {
         return {
             minimize: true,
             minimizer: [
-                ...getImageMin(),
                 new TerserPlugin({
                     terserOptions: {
                         parse: {
@@ -302,6 +301,7 @@ export const createSingleClientWebpackConfig = (
                             },
                         },
                     },
+                    mode === 'prod' && getImageMinLoader(),
                     {
                         exclude: [/\.(js|jsx|mjs|cjs|ts|tsx)$/, /\.(html|ejs)$/, /\.json$/],
                         type: 'asset',