Korzystanie z Imagemin i Webpack

Katie Hempenius
Katie Hempenius

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

Istniejący w tym projekcie element webpack.config.js kopiuje obrazy z katalogu images/ do katalogu dist/, ale nie kompresuje ich.

  • Kliknij Remixuj 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[]. To doda Imagemin do listy wtyczek używanych przez webpack:
new ImageminPlugin()

✔︎ Zameldowanie

Gotowy 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.

Uruchamianie webpacka

  • 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 webpack, ale tym razem w trybie produkcyjnym:
webpack --config webpack.config.js --mode production

Tym razem webpack wyświetli ostrzeżenie, że pliki PNG, mimo zastosowania kompresji, nadal przekraczają zalecany limit rozmiaru. (Tryby developmentproduction webpacka mają różne priorytety, dlatego to ostrzeżenie wyświetla się tylko podczas uruchamiania webpacka w trybie produkcyjnym).

Aby rozwiązać ten problem, dostosuj konfigurację Imagemin.

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 Jpegtran mozjpeg pozwala określić jakość kompresji JPG. W tym Glitchu mamy już zainstalowany dla Ciebie wtyczkę Mozjpeg, ale musisz 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 przekazanego do funkcji ImageminPlugin(), tak aby obiekt wyglądał 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 dla wtyczki, która jest domyślną wtyczką w imagemin-webpack-plugin, możesz je dodać jako parę 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 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 webpack 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żej liczbie obrazów, 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 pełny ekran.
  • Przeprowadź audyt wydajności Lighthouse (Lighthouse > Opcje > Wydajność) w wersji produkcyjnej Glitcha i sprawdź, czy audyt Efektywne kodowanie obrazów został zaliczony.

Przejście audytu „Wydajnie kodowania obrazów” w Lighthouse

Gotowe! Użyłeś Imagemin do optymalnego skompresowania obrazów na stronie.