Imagemin mit Webpack verwenden

Katie Hempenius

Öffnen Sie diesen Glitch in einem zweiten Tab, um diesem Codelab zu folgen.

Imagemin-Webpack-Plug-in einrichten

Dieser Glitch enthält bereits webpack, webpack-cli und imagemin-webpack-plugin. Wenn Sie die Konfiguration für Imagemin hinzufügen möchten, müssen Sie die Datei webpack.config.js bearbeiten.

Die vorhandene webpack.config.js für dieses Projekt kopiert Bilder aus dem Verzeichnis images/ in das Verzeichnis dist/, komprimiert sie aber nicht.

• Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.

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

• Deklarieren Sie zuerst das Imagemin-Plug-in, indem Sie diesen Code oben in 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 wird er am Ende des Arrays hinzugefügt? Wenn Sie es dort hinzufügen, wird Imagemin nach allen anderen Plug-ins ausgeführt.

✔︎ Check-in

Ihre vollständige 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. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
• Führen Sie webpack aus, indem Sie den folgenden Befehl in die Konsole eingeben:

webpack --config webpack.config.js --mode development

Was passiert aber, wenn Sie webpack im Produktionsmodus ausführen?

• Führen Sie webpack noch einmal aus, diesmal im Produktionsmodus:

webpack --config webpack.config.js --mode production

Diesmal zeigt webpack eine Warnung an, dass Ihre PNG-Dateien trotz einiger Komprimierung immer noch die empfohlene Größenbeschränkung überschreiten. Im development- und production-Modus von webpack werden unterschiedliche Dinge priorisiert. Deshalb wird diese Warnung nur angezeigt, wenn webpack im Produktionsmodus ausgeführt wird.

Passen Sie die Imagemin-Konfiguration an, um diese Warnung zu beheben.

Imagemin-Konfiguration anpassen

Fügen Sie Einstellungen zum Komprimieren von PNG-Bildern hinzu, indem Sie das folgende Objekt an ImageminPlugin() übergeben:

{pngquant: ({quality: [0.5, 0.5]})}

Mit diesem Code wird Imagemin angewiesen, PNGs mit dem Pngquant-Plug-in zu komprimieren. Das Feld quality verwendet einen Wertebereich von min und max, um die Komprimierungsstufe zu bestimmen. 0 ist die niedrigste und 1 die höchste. Wenn Sie erzwingen möchten, dass alle Bilder mit einer Qualität von 50% komprimiert werden, übergeben Sie 0.5 sowohl als Mindest- als auch als Höchstwert.

✔︎ Check-in

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, sodass Sie auch angeben sollten, wie sie komprimiert werden.

Imagemin-Konfiguration anpassen (Fortsetzung)

Anstelle des Standard-Plug-ins von imagemin-webpack-plugin für die JPG-Komprimierung (imagemin-jpegtran) verwenden Sie das Plug-in imagemin-mozjpeg. Im Gegensatz zu Jpegtran können Sie bei Mozjpeg eine Komprimierungsqualität für die JPG-Komprimierung angeben. Wir haben das Mozjpeg-Plug-in bereits in diesem Glitch installiert. Du musst aber deine webpack.config.js-Datei bearbeiten:

• Initialisieren Sie das imagemin-mozjpeg-Plug-in, indem Sie die folgende Zeile an den Anfang der webpack.config.js-Datei einfügen:

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

• Füge dem an ImageminPlugin() übergebenen Objekt die Property plugins hinzu, sodass es jetzt so aussieht:

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

Mit diesem Code wird webpack angewiesen, JPGs mit dem Mozjpeg-Plug-in auf eine Qualität von 50 zu komprimieren (0 ist die schlechteste, 100 die beste Qualität).

Hinweis: Fragen Sie sich, warum Mozjpeg zum Plug-in-Array hinzugefügt wurde, 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 sie als Schlüssel/Objekt-Paar dem Objekt hinzugefügt werden, das an ImageminPlugin() übergeben wird. Die Einstellungen für Pnquant sind ein gutes Beispiel dafür.

Wenn Sie jedoch Einstellungen für nicht standardmäßige Plug-ins hinzufügen (z. B. Mozjpeg), sollten Sie sie in das Array aufnehmen, das der Property plugins entspricht.

✔︎ Check-in

Ihr Code sollte jetzt so 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 prüfen

• Führen Sie in der Console das Webpack noch einmal aus:

webpack --config webpack.config.js --mode production

Super! Durch Ihre Änderungen sollten die webpack-Warnungen behoben worden sein.

Webpack warnt Sie zwar vor großen Bildern, kann Ihnen aber nicht sagen, ob Bilder nicht oder nicht ausreichend komprimiert sind. Daher ist es immer eine gute Idee, Ihre Änderungen mit Lighthouse zu überprüfen.

Mit der Leistungsanalyse „Bilder effizient codieren“ von Lighthouse können Sie feststellen, ob die JPEG-Bilder auf Ihrer Seite optimal komprimiert sind.

• Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .
• Führen Sie die Lighthouse-Leistungsprüfung für die Live-Version von Glitch durch (Lighthouse > Optionen > Leistung) und prüfen Sie, ob die Prüfung Bilder effizient codieren bestanden wurde.

Fertig! Sie haben die Bilder auf Ihrer Seite mit Imagemin optimal komprimiert.