Imagemin mit Webpack verwenden

Katie Hempenius

Wenn du diesem Codelab folgen möchtest, öffne diesen Glitch in einem zweiten Tab.

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.

Hinweis : Warum sollten Sie Bilder in einen neuen dist/-Ordner kopieren? dist/ steht für „Distribution“ (Distribution) und es ist ziemlich üblich, den ursprünglichen Code, die Images usw. von den verteilten Versionen zu trennen, da sie sich geringfügig unterscheiden können.

• 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()

Hinweis : Warum sollte es am Ende des Arrays hinzugefügt werden? Wenn Sie es dort hinzufügen, wird Imagemin nach allen anderen Plug-ins zuletzt ausgeführt.

✔⁂ 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 Datei webpack.config.js ein:

const imageminMozjpeg = require('imagemin-mozjpeg');

• Fügen Sie dem an ImageminPlugin() übergebenen Objekt eine plugins-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.

Hinweis: Fragen Sie sich, warum Mozjpeg zum Plug-in-Array hinzugefügt wird, Pngquant jedoch nicht? Gute Frage.

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.