Korzystanie z Imagemin i Webpack

Katie Hempenius

Aby kontynuować pracę z tym ćwiczeniem, otwórz tą stronę Glitch na drugiej karcie.

Konfigurowanie wtyczki webpack Imagemin

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ć edytowanie projektu.

Uwaga: dlaczego warto kopiować obrazy do nowego folderu dist/? dist/ to skrót od „distribution” (dystrybucja). Zwykle zaleca się oddzielne przechowywanie oryginalnego kodu, obrazów itp. od ich dystrybuowanych wersji, ponieważ mogą się one nieznacznie różnić.

• 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()

Uwaga: dlaczego dodawać go na końcu tablicy? Dzięki temu Imagemin będzie działać jako ostatni, po wszystkich innych wtyczkach.

✔︎ 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świetla ostrzeżenie informujące, że pliki PNG pomimo zastosowania kompresji nadal przekraczają zalecany limit rozmiaru. (Tryby development i production webpacka mają różne priorytety, dlatego to ostrzeżenie wyświetla się tylko podczas uruchamiania webpacka w trybie produkcyjnym).

Aby naprawić to ostrzeżenie, 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 z poziomem 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 wyglądał on 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.

Uwaga: zastanawiasz się, dlaczego Mozjpeg jest dodawany do tablicy pluginów, a Pngquant nie? Dobre pytanie.

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 skompresowane lub skompresowane niewystarczająco. 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 produkcyjnej Glitcha i sprawdź, czy audyt Efektywne kodowanie obrazów został zaliczony.

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