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ć edycję 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świetli ostrzeżenie, że pliki PNG, mimo 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 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.

Uwaga: zastanawiasz się, dlaczego Mozjpeg jest dodawany do tablicy wtyczek, 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 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 produkcyjnej Glitcha i sprawdź, czy audyt Efektywne kodowanie obrazów został zaliczony.

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