Imagemin mit Webpack verwenden

Katie Hempenius

Öffnen Sie dieses Glitch-Projekt in einem zweiten Tab, um diesem Codelab zu folgen.

Imagemin-Webpack-Plug-in einrichten

Dieses Glitch-Projekt 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.

Mit dem vorhandenen webpack.config.js für dieses Projekt wurden Bilder aus dem Verzeichnis images/ in das Verzeichnis dist/ kopiert, aber nicht komprimiert.

• Klicken Sie auf Remix erstellen, um zu bearbeiten, um das Projekt bearbeitbar zu machen.

Hinweis: Warum sollten Sie Bilder in einen neuen dist/-Ordner kopieren? dist/ steht für „Distribution“ (Verteilung). Es ist gängige Praxis, Originalcode, Bilder usw. von den verteilten Versionen zu trennen, da sie sich geringfügig 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 im plugins[]-Array hinzu. Dadurch wird Imagemin der Liste der Plug-ins hinzugefügt, die von webpack verwendet werden:

new ImageminPlugin()

Hinweis: Warum wird es am Ende des Arrays hinzugefügt? So wird sichergestellt, dass Imagemin nach allen anderen Plug-ins als Letztes ausgeführt wird.

✔︎ Check-in

Die 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 der Button „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
• Geben Sie den folgenden Befehl in die Konsole ein, um webpack auszuführen und Ihre Bilder zu komprimieren:

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 jedoch im Produktionsmodus:

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

Dieses Mal zeigt webpack eine Warnung an, dass Ihre PNG-Dateien trotz einer gewissen Komprimierung immer noch die empfohlene Größenbeschränkung überschreiten. (In 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 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]})}

Dieser Code weist Imagemin an, PNGs mit dem Pngquant-Plug-in zu komprimieren. Im Feld quality wird ein Wertebereich von min und max verwendet, um die Komprimierungsstufe zu bestimmen. 0 ist die niedrigste und 1 die höchste Stufe. Wenn Sie alle Bilder mit einer Qualität von 50 % komprimieren möchten, ü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 enthält auch JPEG-Bilder. Sie sollten also 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 Jpegtran können Sie mit Mozjpeg eine Komprimierungsqualität für die JPG-Komprimierung angeben. Wir haben das Mozjpeg-Plug-in bereits für Sie in diesem Glitch installiert. Sie müssen jedoch die Datei webpack.config.js bearbeiten:

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

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

• Fügen Sie dem an ImageminPlugin() übergebenen Objekt das Attribut plugins 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 zu komprimieren (0 ist die schlechteste, 100 die beste Qualität).

Hinweis: Sie fragen sich vielleicht, warum Mozjpeg dem Plug-in-Array hinzugefügt wird, Pngquant aber 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 als Schlüssel/Objekt-Paar im 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 einfügen, 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 webpack in der Console noch einmal aus:

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

Super! Die Änderungen sollten die Webpack-Warnungen behoben haben.

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

Mit der Leistungsprüfung „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, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) .
• Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) für die Live-Version Ihres Glitch-Projekts aus und prüfen Sie, ob die Prüfung Bilder effizient codieren bestanden wurde.

Fertig! Sie haben Imagemin verwendet, um die Bilder auf Ihrer Seite optimal zu komprimieren.