Add WebP support and update dependencies by cedric07 · Pull Request #486 · BeAPI/beapi-frontend-framework

cedric07 · 2026-04-24T09:09:51Z

Added imagemin-webp to package.json and updated yarn.lock.
Configured WebP generation in webpack.common.js.
Updated SCSS files to support WebP images.
Removed obsolete logo SVG file.

Sur la base de cette doc : https://webpack.js.org/plugins/image-minimizer-webpack-plugin/#loader-generator-example-for-imagemin

Par défaut webpack va garder également le fichier non converti dans le dossier compilé.

Pour l'appel au fichier dans le code, il faut lui passer l'option presetdu generator : ?as=webp

Exemple : background-image: url(../img/static/logo.jpg?as=webp) et Webpack viendra automatiquement convertir le fichier en webp et remplacer l'url : background-image: url(images/logo.webp)

Exemple : background-image: url(../img/static/logo.jpg) et Webpack ne fera pas la conversion et gardera le fichier jpg : background-image: url(images/logo.jpg)

La conversion se fait au yarn build

Si elle doit se faire aussi en mode dev, il faudrait déplacer le code au dessus :

module.exports = {
	entry: entries,
	output: { ... },
	plugins: [
		// 1. Le générateur va ici pour fonctionner en DEV et en PROD
		new ImageMinimizerPlugin({
			generator: [
				{
					preset: 'webp',
					implementation: ImageMinimizerPlugin.imageminGenerate,
					options: {
						plugins: ['imagemin-webp'],
					},
				},
			],
		}),
	],
	optimization: {
		minimizer: [
			// 2. La minification classique reste ici, elle ne tournera qu'en PROD
			new ImageMinimizerPlugin({ ... }),
		],
	},
}

Note

Medium Risk
Build/CI and webpack asset-optimization behavior changes (image minification and default image generation), which can affect produced artifacts and deployments. Risk is moderate because it primarily impacts build outputs and only runs image minimization in production builds.

Overview
Updates CI to use Corepack-enabled Yarn with actions/setup-node@v4 and Yarn caching, ensuring the workflow uses the repo-declared Yarn version.

Switches default/generated images from JPG to WebP (including login logo and the custom WebpackImageSizesPlugin defaults), and adds production-only image optimization via ImageMinimizerPlugin using the updated svgo.config (now based on preset-default). Removes an unused SCSS mixin and an obsolete SVG asset, and bumps caniuse-lite in yarn.lock.

^{Reviewed by Cursor Bugbot for commit 13624d5. Bugbot is set up for automated code reviews on this repo. Configure here.}

francoistibo · 2026-04-24T10:07:01Z

forcer la transformation de toutes les images en WebP

francoistibo · 2026-04-24T10:09:01Z

tester composer cs pour fix les warnings

- Added imagemin-webp to package.json and updated yarn.lock. - Configured WebP generation in webpack.common.js. - Updated SCSS files to support WebP images. - Removed obsolete logo SVG file.

Replace yarn set version berry with corepack enable to match packageManager and avoid lockfile v8→v9 migration blocked in PRs. Upgrade actions/setup-node to v4 with yarn cache.

…ate instance Move ImageMinimizerPlugin to plugins (generator + optional prod minifier) so ?as=webp works when minimization is off. Remove it from optimization.minimizer to keep a single instance and avoid asset name conflicts. Minor shorthand for mode in dev/prod config.

cedric07 · 2026-04-27T09:17:54Z

Vu avec @MarieComet

Ne fonctionne pas pour les appels en PHP. Cette solution native webpack ne semble pas être le bon compromis. Il faudrait voir pour une alternative différente.

TEST sur une autre branche pour pas poluer cette dernière :

PR : #491

Pour la partie PHP, un plugin JS pour convertir toutes les images jpg et png du dossier static en webp, et les mettre dans le dossier dist. Ce qui permet de pouvoir les appeler directement en PHP
Garder le fonctionnement actuel pour les CSS, car sinon la compilation casse (css-loader) si on appel l'image webp directement car elle n'existe pas encore

@firestar300 Bonne approche ou pas ? a dispo pour en discuter / tester

- Introduced WebpackStaticImagesPlugin to copy and convert static images to WebP format. - Configured plugin in plugins.js with input and output directories, quality settings, and console output options.

Improve build performance by skipping image processing when no files in the input directory have changed. The plugin now registers the input directory as a context dependency and checks modified files during subsequent builds to avoid redundant processing.

…lugin Switch from Sharp to fs.copyFile for original assets to ensure they are preserved exactly as-is, maintaining source quality and metadata (EXIF/ICC). Sharp is now used exclusively for generating the WebP derivatives.

Add WebpackStaticImagesPlugin to handle static image processing

- Deleted unused JPEG images (default.jpg, logo.jpg) and replaced them with WebP versions (default.webp, logo.webp). - Updated SCSS and Webpack configuration to reference the new WebP images. - Removed imagemin-webp from package.json and yarn.lock as it is no longer needed. - Generate default images in webp format by default

- Deleted WebpackStaticImagesPlugin to streamline image processing. - Removed related configuration from plugins.js, eliminating the static image processing setup. - This change simplifies the build process by relying on existing image handling methods.

cedric07 · 2026-04-28T14:19:05Z

Pour faire suite au point entre TD :

Suppression du generator webpack webp
Transformation manuelle des jpg/png en webp dans le dossier static
Mise à jour du script qui génère les images par défaut pour qu'elles soient générées en webp
Suppression du script qui va transformer toutes les images jpg/png du dossier static en webp

TODO : A tester dans le cadre d'un projet, si ARI va bien aller charger les images webp générées, normalement oui au vu du json généré :

"square": [
      {
        "srcsets": [
          {
            "srcset": "",
            "size": "img-100-100"
          },
          {
            "srcset": "2x",
            "size": "img-200-200"
          },
          {
            "srcset": "2x",
            "size": "img-400-400"
          }
        ],
        "default_img": "default-400-400.webp",
        "img_base": "img-400-400"
      }
    ]

francoistibo · 2026-04-29T07:09:25Z

TODO : tester sur un projet récent (CD78 et/ou VORTEX)

cedric07 · 2026-04-29T12:57:05Z

TODO : tester sur un projet récent (CD78 et/ou VORTEX)

Testé sur vortex, RAS ça fonctionne bien, les images par défaut de ARI pointent bien vers le fichier webp

- Modified the SVGO configuration to align with SVGO 3 standards, replacing the old plugin format with the new preset-default structure. - Adjusted the plugins list in plugins.js to ensure proper integration of the updated svgoconfig. - This change enhances image optimization while maintaining compatibility with the latest SVGO version.

cedric07 · 2026-04-29T13:16:03Z

Retour du bugbot sur svgo fixé, cela cassait la compilation au build : #486 (comment)

En regardant, en effet toute l'optimisation des svg n'était pas prise en compte car pas compatible avec la version 3 du package.

Il a fallut migrer la configuration du format svgo 2 à 3

https://github.com/BeAPI/beapi-frontend-framework/pull/486/changes#diff-49e5a23a192af92d5462330741246f3c8c015404d26c2a169dbf8cca24fc2b44

@firestar300

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit eb5e0fa. Configure here.}

cursor · 2026-04-29T13:51:16Z

+						},
+					},
+				})
+			)


ImageMinimizerPlugin moved from optimization.minimizer to plugins array

Medium Severity

ImageMinimizerPlugin with its minimizer config was moved from optimization.minimizer (in webpack.common.js) to the plugins array (in plugins.js). The PR description itself shows the correct pattern: the minimizer belongs in optimization.minimizer and only the generator belongs in plugins. Placing it in the plugins array bypasses webpack's optimization pipeline, losing caching and deduplication benefits. Community reports indicate this can cause significantly slower builds and high CPU usage with larger image sets. The plugin needs to be in optimization.minimizer — either back in webpack.common.js or in webpack.prod.js.

Additional Locations (1)

config/webpack.common.js#L12-L14

^{Reviewed by Cursor Bugbot for commit eb5e0fa. Configure here.}

@firestar300 Le fait que t'as déplacé ça, le bugbot remonte ce soucis ? logique pour toi ?

- Included the 'removeTitle' plugin in the SVGO configuration to enhance SVG optimization by removing title elements from SVG files. - This addition aims to streamline SVG output and reduce file size.

cedric07 requested a review from firestar300 April 24, 2026 09:09

firestar300 force-pushed the feat/webp branch from 029806f to d5acef3 Compare April 24, 2026 09:37

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread src/scss/02-tools/_m-background-static.scss Outdated

francoistibo requested review from francoistibo and ptesei April 24, 2026 10:04

cedric07 and others added 2 commits April 24, 2026 12:20

Add WebP support and update dependencies

f57f759

- Added imagemin-webp to package.json and updated yarn.lock. - Configured WebP generation in webpack.common.js. - Updated SCSS files to support WebP images. - Removed obsolete logo SVG file.

ci: use Corepack for Yarn 4.5.0 instead of latest Berry

db240d6

Replace yarn set version berry with corepack enable to match packageManager and avoid lockfile v8→v9 migration blocked in PRs. Upgrade actions/setup-node to v4 with yarn cache.

firestar300 force-pushed the feat/webp branch from 96d6e18 to db240d6 Compare April 24, 2026 10:20

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread .github/workflows/node.js.yml Outdated

ci(node.js): change order of tasks

50732ce

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread config/webpack.common.js Outdated

firestar300 and others added 2 commits April 24, 2026 16:19

remove: delete unused background-static SCSS mixin

d8070be

Add WebpackStaticImagesPlugin to handle static image processing

803eb39

- Introduced WebpackStaticImagesPlugin to copy and convert static images to WebP format. - Configured plugin in plugins.js with input and output directories, quality settings, and console output options.

cedric07 mentioned this pull request Apr 27, 2026

Add WebpackStaticImagesPlugin to handle static image processing #491

Merged

firestar300 and others added 5 commits April 27, 2026 14:14

Merge pull request #491 from BeAPI/feat/webp-plugin

90876fc

Add WebpackStaticImagesPlugin to handle static image processing

cedric07 commented Apr 28, 2026

View reviewed changes

Comment thread config/webpack.dev.js

Comment thread config/webpack.prod.js

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread config/plugins.js Outdated

fix svgo config comment

eb5e0fa

cursor Bot reviewed Apr 29, 2026

View reviewed changes

francoistibo reviewed May 4, 2026

View reviewed changes

Comment thread src/scss/02-tools/_m-background-static.scss Outdated

feat(svgo): add 'removeTitle' plugin to SVGO configuration

13624d5

- Included the 'removeTitle' plugin in the SVGO configuration to enhance SVG optimization by removing title elements from SVG files. - This addition aims to streamline SVG output and reduce file size.

herewithme self-requested a review May 7, 2026 14:04

Conversation

cedric07 commented Apr 24, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

francoistibo commented Apr 24, 2026

Uh oh!

francoistibo commented Apr 24, 2026

Uh oh!

Uh oh!

Uh oh!

cedric07 commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cedric07 commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

francoistibo commented Apr 29, 2026

Uh oh!

cedric07 commented Apr 29, 2026

Uh oh!

cedric07 commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Apr 29, 2026

Choose a reason for hiding this comment

ImageMinimizerPlugin moved from optimization.minimizer to plugins array

Uh oh!

cedric07 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cedric07 commented Apr 24, 2026 •

edited by cursor Bot

Loading

cedric07 commented Apr 27, 2026 •

edited

Loading

cedric07 commented Apr 28, 2026 •

edited

Loading

cedric07 commented Apr 29, 2026 •

edited

Loading