Imagemin Webpack-Plug-in einrichten
Dieser Glitch enthält bereits webpack
, webpack-cli
und
imagemin-webpack-plugin
. Um die Konfiguration für Imagemin hinzuzufügen, müssen Sie die Datei webpack.config.js
bearbeiten.
Die vorhandene webpack.config.js
für dieses Projekt hat Images aus dem Verzeichnis images/
in das Verzeichnis dist/
kopiert, aber nicht komprimiert.
- Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
- Deklarieren Sie zuerst das Imagemin-Plug-in, indem Sie den folgenden Code am Anfang von
webpack.config.js
einfügen:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- Fügen Sie als Nächstes den folgenden Code als letztes Element in das Array
plugins[]
ein. Dadurch wird Imagemin der Liste der von Webpack verwendeten Plug-ins hinzugefügt:
new ImageminPlugin()
✔⁂ Einchecken
Die webpack.config.js
-Datei sollte jetzt so aussehen:
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()
]
}
Sie haben jetzt eine Webpack-Konfiguration, die Bilder mit Imagemin komprimiert.
Webpack ausführen
- Klicken Sie auf Terminal. Wenn die Terminal-Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise die Vollbildoption verwenden.
- Um Ihre Bilder zu komprimieren, führen Sie Webpack aus, indem Sie den folgenden Befehl in der Konsole eingeben:
webpack --config webpack.config.js --mode development
Aber was passiert, wenn Sie Webpack im Produktionsmodus ausführen?
- Führen Sie Webpack noch einmal aus, diesmal aber im Produktionsmodus:
webpack --config webpack.config.js --mode production
Dieses Mal zeigt Webpack eine Warnung an, die Sie darüber informiert, dass Ihre PNG-Dateien trotz einer gewissen Komprimierung die empfohlene Größenbeschränkung überschreiten.
(Bei den Modi development
und production
von Webpack werden unterschiedliche Dinge priorisiert. Deshalb wird diese Warnung nur angezeigt, wenn Webpack im Produktionsmodus ausgeführt wird.)
Passen Sie unsere Imagemin-Konfiguration an, um diese Warnung zu beheben.
Imagemin-Konfiguration anpassen
Fügen Sie Einstellungen für die Komprimierung von PNG-Bildern hinzu, indem Sie das folgende Objekt an ImageminPlugin()
übergeben:
{pngquant: ({quality: [0.5, 0.5]})}
Dieser Code weist Imagemin an, PNGs mit dem Pngquant-Plug-in zu komprimieren. Im Feld quality
wird der Wertebereich min
und max
verwendet, um das Komprimierungsniveau zu bestimmen. 0 ist die niedrigste und 1 die höchste Stufe. Wenn Sie erzwingen möchten, dass alle Bilder bei 50% komprimiert werden, geben Sie 0.5
als Mindest- und Höchstwert an.
✔⁂ Einchecken
Ihre webpack.config.js
-Datei sollte jetzt so aussehen:
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]}),
})
]
}
Aber was ist mit JPEGs? Das Projekt verfügt auch über JPEG-Bilder, daher sollten Sie auch angeben, wie diese komprimiert werden.
Imagemin-Konfiguration anpassen (Fortsetzung)
Verwenden Sie anstelle des Standard-Plug-ins von imagemin-webpack-plugin
für die JPG-Komprimierung (imagemin-jpegtran
) das Plug-in imagemin-mozjpeg
. Im Gegensatz zu JSpegtran können Sie mit Mozjpeg eine Komprimierungsqualität für die JPG-Komprimierung festlegen. Wir haben das Mozjpeg-Plug-in in diesem Glitch bereits für dich installiert, aber du musst deine webpack.config.js
-Datei bearbeiten:
- Initialisieren Sie das Plug-in
imagemin-mozjpeg
. Fügen Sie dazu die folgende Zeile am Anfang der Dateiwebpack.config.js
ein:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Fügen Sie dem an
ImageminPlugin()
übergebenen Objekt eineplugins
-Eigenschaft hinzu, sodass das Objekt jetzt so aussieht:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Dieser Code weist Webpack an, JPGs mit dem Mozjpeg-Plug-in auf eine Qualität von 50 (0 ist die schlechteste Qualität; 100 ist die beste) zu komprimieren.
Wenn Sie Einstellungen für ein Plug-in hinzufügen, das ein Standard-Plug-in von imagemin-webpack-plugin
ist, können diese dem Objekt als Schlüssel/Objekt-Paar hinzugefügt werden, das an ImageminPlugin()
übergeben wird. Die Einstellungen für Pnquant sind ein gutes Beispiel dafür.
Einstellungen für nicht standardmäßige Plug-ins (z. B. Mozjpeg) sollten jedoch in das Array aufgenommen werden, das dem Attribut plugins
entspricht.
✔⁂ Einchecken
Ihr Code sollte jetzt wie folgt aussehen:
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})]
})
]
}
Webpack noch einmal ausführen und Ergebnisse mit Lighthouse überprüfen
- Führen Sie Webpack in der Console noch einmal aus:
webpack --config webpack.config.js --mode production
Juhu! Durch Ihre Änderungen sollten die Webpack-Warnungen korrigiert worden sein.
Webpack warnt Sie vor großen Bildern, kann jedoch nicht erkennen, ob Bilder unkomprimiert oder unterkomprimiert sind. Daher ist es immer eine gute Idee, Ihre Änderungen mit Lighthouse zu überprüfen.
Mit der Leistungsprüfung „Bilder effizient codieren“ von Lighthouse erfahren Sie, ob die JPEG-Bilder auf Ihrer Seite optimal komprimiert sind.
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
- Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) für die Liveversion von Glitch aus und prüfen Sie, ob die Prüfung Images effizient codieren bestanden wurde.
Fertig! Sie haben Imagemin verwendet, um die Bilder auf Ihrer Seite optimal zu komprimieren.