Imagemin mit Webpack verwenden

Katie Hempenius

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

Webpack-Plug-in für Imagemin einrichten

Dieser Glitch enthält bereits webpack, webpack-cli und imagemin-webpack-plugin Um die Konfiguration für Imagemin hinzuzufügen, müssen Sie um Ihre webpack.config.js-Datei zu bearbeiten.

Mit der vorhandenen webpack.config.js für dieses Projekt wurden Images kopiert aus das Verzeichnis images/ in das Verzeichnis dist/, aber es wurde und komprimiert werden.

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

Hinweis: Welche Vorteile bietet das Kopieren von Bildern in einen neuen dist/-Ordner? dist/ steht für „Distribution“ (Verteilung) und es ist durchaus üblich, den ursprünglichen Code, die Images usw. von ihren verteilten Versionen zu trennen, da diese sich leicht unterscheiden können.

• Deklarieren Sie zunächst das Imagemin-Plug-in, indem Sie diesen Code oben auf der webpack.config.js:

const ImageminPlugin = require('imagemin-webpack-plugin').default;

• Fügen Sie als Nächstes den folgenden Code als letztes Element in das Array plugins[] ein. Dieses fügt Imagemin der Liste der von Webpack verwendeten Plug-ins hinzu:

new ImageminPlugin()

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

✔🎬 Check-in

Die vollständige webpack.config.js-Datei sollte nun 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.
• Um Ihre Bilder zu komprimieren, führen Sie Webpack aus, indem Sie den folgenden Befehl in die Console:

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

Aber was passiert, wenn Sie Webpack im Produktionsmodus ausführen?

• Führen Sie das Webpack noch einmal aus, aber diesmal im Produktionsmodus:

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

Dieses Mal zeigt Webpack eine Warnung an, dass Ihre PNG-Datei -Dateien trotz gewisser Komprimierung die empfohlene Größenbeschränkung überschreiten. (Die Webpack-Modi development und production priorisieren unterschiedliche Dinge, die 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 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 mithilfe des Pngquant-Plug-ins zu komprimieren. Die Das Feld quality verwendet die Wertebereiche min und max, um die Komprimierungsstufe: 0 ist die niedrigste und 1 die höchste. Um alle Bilder bei 50% Qualität komprimiert werden, übergeben Sie 0.5 als Mindest- und Höchstwert.

✔🎬 Check-in

Die Datei webpack.config.js 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 wie sie komprimiert werden.

Imagemin-Konfiguration anpassen (Fortsetzung)

Anstatt das Standard-Plug-in von imagemin-webpack-plugin für die JPG-Komprimierung zu verwenden (imagemin-jpegtran), verwenden Sie das Plug-in imagemin-mozjpeg. Im Gegensatz zu Jpegtran Mit Mozjpeg können Sie eine Komprimierungsqualität für die JPG-Komprimierung festlegen. Wir haben das Mozjpeg-Plug-in bereits in diesem Glitch installiert haben, bearbeiten Sie die Datei webpack.config.js:

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

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

• Fügen Sie dem an ImageminPlugin() übergebenen Objekt eine plugins-Eigenschaft hinzu, sodass sieht das Objekt nun so aus:

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

Dieser Code weist Webpack an, JPGs auf eine Qualität von 50 zu komprimieren (0 ist die schlechteste; 100 ist die beste Wahl) mit dem Mozjpeg-Plug-in.

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 imagemin-webpack-plugin können sie dem Objekt als Schlüssel-Objekt-Paar hinzugefügt werden. an ImageminPlugin() übergeben. Die Einstellungen für Pnquant sind ein gutes Beispiel für dies.

Wenn Sie jedoch Einstellungen für nicht standardmäßige Plug-ins hinzufügen, z. B. Mozjpeg) hinzugefügt werden, müssen sie hinzugefügt werden, indem sie in das Array für Das Attribut plugins

✔🎬 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 deine Änderungen sollten die Webpack-Warnungen behoben sein.

Webpack warnt Sie bei großen Bildern, kann Sie jedoch nicht sagen, unkomprimiert oder unterkomprimiert. Daher ist es immer eine gute Idee, Lighthouse, um Ihre Änderungen zu überprüfen.

Das Tool „Bilder effizient codieren“ von Lighthouse können Sie feststellen, Die JPEG-Bilder auf Ihrer Seite sind optimal komprimiert.

• Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild
• Führen Sie die Lighthouse-Leistungsprüfung durch (Lighthouse > Optionen > Leistung). in der Live-Version Ihrer Glitch-Funktion prüfen und prüfen, Images bestanden.

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