Korzystanie z Imagemin i Webpack

Katie Hempenius

Konfigurowanie wtyczki webpack Imagemin

Ta usterka zawiera już webpack, webpack-cli i imagemin-webpack-plugin. Aby dodać konfigurację Imagemin, musisz edytować plik webpack.config.js.

Istniejące webpack.config.js dla tego projektu kopiują obrazy z katalogu images/ do katalogu dist/, ale ich nie kompresował.

• Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.

• Najpierw zadeklaruj wtyczkę Imagemin, dodając ten kod na początku pliku webpack.config.js:

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

• Następnie dodaj ten kod jako ostatni element tablicy plugins[]. Spowoduje to dodanie Imagemin do listy wtyczek używanych przez Webpack:

new ImageminPlugin()

✔︎ Zameldowanie

Twój kompletny plik webpack.config.js powinien wyglądać tak:

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()
  ]
}

Masz teraz konfigurację webpack, która kompresuje obrazy za pomocą Imagemin.

Uruchom pakiet internetowy

• Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
• Aby skompresować obrazy, uruchom webpack, wpisując to polecenie w konsoli:

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

Co się jednak stanie, jeśli uruchomisz webpacka w trybie produkcyjnym?

• Ponownie uruchom pakiet internetowy, ale tym razem w trybie produkcyjnym:

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

Tym razem pakiet internetowy wyświetla ostrzeżenie, że mimo pewnej kompresji pliki PNG wciąż przekraczają zalecany rozmiar. (Tryby development i production webpacka mają różne priorytety, dlatego to ostrzeżenie wyświetla się tylko podczas uruchamiania webpacka w trybie produkcyjnym).

Dostosuj konfigurację Imagemin, aby usunąć to ostrzeżenie.

Dostosowywanie konfiguracji Imagemin

Dodaj ustawienia kompresji obrazów PNG, przekazując do funkcji ImageminPlugin() ten obiekt:

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

Ten kod informuje Imagemin, aby skompresował pliki PNG za pomocą wtyczki Pngquant. Pole quality używa zakresu wartości min i max do określenia poziomu kompresji – 0 to wartość najniższa, a 1 – najwyższa. Aby wymusić skompresowanie wszystkich obrazów w jakości 50%, podaj wartość 0.5 jako wartość minimalną i maksymalną.

✔︎ Zameldowanie

Plik webpack.config.js powinien wyglądać tak:

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]}),
      })
  ]
}

A co z plikami JPEG? Projekt zawiera też obrazy JPEG, więc musisz określić, jak są one skompresowane.

Dostosowywanie konfiguracji Imagemin (ciąg dalszy)

Zamiast domyślnej wtyczki imagemin-webpack-plugin do kompresji JPG (imagemin-jpegtran) użyj wtyczki imagemin-mozjpeg. W przeciwieństwie do Jpegtrana Mozjpeg pozwala określić jakość kompresji JPG. W tym glitchu zainstalowali już wtyczkę Mozjpeg, ale musisz jeszcze edytować plik webpack.config.js:

• Aby zainicjować wtyczkę imagemin-mozjpeg, dodaj ten wiersz na początku pliku webpack.config.js:

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

• Dodaj właściwość plugins do obiektu przekazywanego do ImageminPlugin(), aby obiekt wyglądał teraz tak:

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

Ten kod informuje webpack, aby skompresował pliki JPG do jakości 50 (0 to najgorsza jakość, a 100 – najlepsza) za pomocą wtyczki Mozjpeg.

Jeśli dodajesz ustawienia wtyczki, która jest domyślną wtyczką imagemin-webpack-plugin, możesz dodać je jako para klucz-obiekt w obiekcie przekazywanym do ImageminPlugin(). Dobrym przykładem są ustawienia Pnquant.

Jeśli jednak dodajesz ustawienia wtyczek innych niż domyślne (np. Mozjpeg), należy je dodać, umieszczając je w tablicy odpowiadającej właściwości plugins.

✔︎ Zameldowanie

Twój kod powinien teraz wyglądać tak:

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})]
    })
  ]
}

Ponownie uruchom pakiet internetowy i sprawdź wyniki za pomocą Lighthouse

• W konsoli ponownie uruchom webpack:

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

Hurra! Zmiany powinny rozwiązać problem z ostrzeżeniami webpacka.

webpack ostrzega o dużych obrazach, ale nie może określić, czy są one nieskompresowane czy skompresowane w niewystarczającym stopniu. Dlatego zawsze warto używać Lighthouse do weryfikowania zmian.

Weryfikacja wydajności Lighthouse „Skuteczne kodowanie obrazów” może poinformować, czy obrazy JPEG na stronie są optymalnie skompresowane.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran.
• Przeprowadź audyt wydajności Lighthouse (Lighthouse > Opcje > Wydajność) w wersji na żywo Glitcha i sprawdź, czy audyt Efektywne kodowanie obrazów został zaliczony.

Gotowe! Udało Ci się użyć programu Imagemin, aby optymalnie skompresować obrazy na stronie.