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 index 6c3ad47b..cb39b753 100644 --- 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 index 1974b844..c02e2801 100644 --- 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',