Configurer le plug-in Webpack Imagemin
Ce Glitch contient déjà webpack
, webpack-cli
et imagemin-webpack-plugin
. Pour ajouter la configuration d'Imagemin, vous devez modifier votre fichier webpack.config.js
.
Le fichier webpack.config.js
de ce projet a copié des images du répertoire images/
vers le répertoire dist/
, mais ne les a pas compressées.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
- Commencez par déclarer le plug-in Imagemin en ajoutant le code suivant en haut de
webpack.config.js
:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- Ajoutez ensuite le code suivant en tant que dernier élément du tableau
plugins[]
. Cette action ajoute Imagemin à la liste des plug-ins utilisés par webpack:
new ImageminPlugin()
✔✔ Enregistrement
Une fois terminé, votre fichier webpack.config.js
doit se présenter comme suit:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin()
]
}
Vous disposez maintenant d'une configuration Webpack qui compresse les images à l'aide d'Imagemin.
Exécuter le Webpack
- Cliquez sur Terminal (remarque: si le bouton "Terminal" ne s'affiche pas, vous devrez peut-être utiliser l'option "Plein écran").
- Pour compresser vos images, exécutez webpack en saisissant la commande suivante dans la console:
webpack --config webpack.config.js --mode development
Mais que se passe-t-il si vous exécutez webpack en mode production ?
- Réexécutez "webpack", mais cette fois en mode production:
webpack --config webpack.config.js --mode production
Cette fois-ci, Webpack affiche un avertissement vous indiquant que vos fichiers PNG, malgré une compression, dépassent toujours la taille recommandée.
(Les modes development
et production
de webpack donnent la priorité à des éléments différents, c'est pourquoi cet avertissement ne s'affiche que lorsque Webpack est exécuté en mode production.)
Personnalisez notre configuration Imagemin pour corriger cet avertissement.
Personnaliser votre configuration Imagemin
Ajoutez des paramètres pour compresser les images PNG en transmettant l'objet suivant à ImageminPlugin()
:
{pngquant: ({quality: [0.5, 0.5]})}
Ce code indique à Imagemin de compresser les fichiers PNG à l'aide du plug-in Pngquant. Le champ quality
utilise une plage de valeurs min
et max
pour déterminer le niveau de compression : 0 est le niveau le plus bas et 1 le plus élevé. Pour forcer la compression de toutes les images à 50% de qualité, transmettez 0.5
en tant que valeur minimale et maximale.
✔✔ Enregistrement
Votre fichier webpack.config.js
devrait maintenant se présenter comme suit :
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
})
]
}
Mais qu'en est-il des JPEG ? Le projet contient également des images JPEG. Vous devez donc également spécifier leur mode de compression.
Personnaliser votre configuration Imagemin (suite)
Au lieu d'utiliser le plug-in par défaut de imagemin-webpack-plugin
pour la compression JPG (imagemin-jpegtran
), utilisez le plug-in imagemin-mozjpeg
. Contrairement à Jpegtran, Mozjpeg vous permet de spécifier une qualité de compression pour votre compression JPG. Nous avons déjà installé le plug-in Mozjpeg pour vous dans ce Glitch, mais vous devez modifier votre fichier webpack.config.js
:
- Initialisez le plug-in
imagemin-mozjpeg
en ajoutant la ligne suivante en haut de votre fichierwebpack.config.js
:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Ajoutez une propriété
plugins
à l'objet transmis àImageminPlugin()
, de sorte que l'objet se présente maintenant comme suit:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Ce code indique à webpack de compresser les fichiers JPG avec une qualité de 50 (0 étant la pire et 100 comme la meilleure) à l'aide du plug-in Mozjpeg.
Si vous ajoutez des paramètres pour un plug-in qui est un plug-in par défaut de imagemin-webpack-plugin
, vous pouvez les ajouter en tant que paire clé/objet sur l'objet transmis à ImageminPlugin()
. Les paramètres de Pnquant en sont un bon exemple.
Toutefois, si vous ajoutez des paramètres pour des plug-ins autres que ceux par défaut (par exemple, Mozjpeg), ils doivent être inclus dans le tableau correspondant à la propriété plugins
.
✔✔ Enregistrement
Le code devrait se présenter ainsi :
const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: 'img/**/**',
to: path.resolve(__dirname, 'dist')
}]),
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
]
}
Réexécuter le Webpack et vérifier les résultats avec Lighthouse
- Dans la console, réexécutez webpack:
webpack --config webpack.config.js --mode production
Parfait ! Vos modifications devraient avoir corrigé les avertissements webpack.
webpack vous avertit en cas d'images volumineuses, mais il ne peut pas vous dire si les images sont non compressées ou sous-compressées. C'est pourquoi il est toujours judicieux d'utiliser Lighthouse pour vérifier vos modifications.
L'audit de performances "Encoder efficacement les images" de Lighthouse peut vous indiquer si les images JPEG de votre page sont compressées de manière optimale.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Exécutez l'audit de performances Lighthouse (Lighthouse > Options > Performance) sur la version en direct de votre Glitch et vérifiez que l'audit Encodez efficacement les images a été réussi.
Opération réussie. Vous avez utilisé Imagemin pour compresser de manière optimale les images de votre page.