Korzystanie z Imagemin i Webpack

Katie Hempenius
Katie Hempenius
X

Konfigurowanie wtyczki Imagemin do webpacka

Ten Glitch zawiera już te elementy: webpack, webpack-cli i imagemin-webpack-plugin. Aby dodać konfigurację Imagemin, musisz zmodyfikować plik webpack.config.js.

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

  • Kliknij Zremiksuj, aby edytować, aby umożliwić edytowanie 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 w tablicy plugins[]. Spowoduje to dodanie Imagemin do listy wtyczek używanych przez webpack:
new ImageminPlugin()

✔︎ Zamelduj się

Kompletny plik webpack.config.js powinien teraz 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ę webpacka, która kompresuje obrazy za pomocą Imagemin.

Uruchamianie webpacka

  • Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, może być konieczne użycie opcji Pełny ekran).
  • Aby skompresować obrazy, uruchom webpack, wpisując w konsoli to polecenie:
webpack --config webpack.config.js --mode development

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

  • Uruchom ponownie webpack, ale tym razem w trybie produkcyjnym:
webpack --config webpack.config.js --mode production

Tym razem webpack wyświetla ostrzeżenie, że pliki PNG, mimo pewnej kompresji, nadal przekraczają zalecany limit rozmiaru. (Tryby development i production webpacka traktują priorytetowo różne rzeczy, dlatego to ostrzeżenie pojawia się tylko wtedy, gdy webpack działa w trybie produkcyjnym).

Aby usunąć to ostrzeżenie, dostosuj konfigurację Imagemin.

Dostosowywanie konfiguracji Imagemin

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

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

Ten kod informuje Imagemin, że ma kompresować pliki PNG za pomocą wtyczki Pngquant. Pole quality używa zakresu wartości od min do max, aby określić poziom kompresji – 0 to najniższy, a 1 to najwyższy. Aby wymusić kompresję wszystkich obrazów do 50% jakości, podaj 0.5 jako wartość minimalną i maksymalną.

✔︎ Zamelduj się

Plik webpack.config.js powinien teraz 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 mają być kompresowane.

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. Wtyczka Mozjpeg została już zainstalowana w tym projekcie Glitch, ale musisz zmodyfikować plik webpack.config.js:

  • Zainicjuj wtyczkę imagemin-mozjpeg, dodając 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ł 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, 100 to najlepsza) za pomocą wtyczki Mozjpeg.

Jeśli dodajesz ustawienia wtyczki, która jest domyślną wtyczką 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 dla wtyczek innych niż domyślne (np. Mozjpeg), należy je dodać, uwzględniając je w tablicy odpowiadającej właściwości plugins.

✔︎ Zamelduj się

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

Ponowne uruchamianie webpacka i sprawdzanie wyników za pomocą Lighthouse

  • W konsoli ponownie uruchom webpack:
webpack --config webpack.config.js --mode production

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

webpack ostrzega o dużych obrazach, ale nie może stwierdzić, czy są one nieskompresowane lub niedostatecznie skompresowane. Dlatego zawsze warto używać Lighthouse do weryfikowania zmian.

Przeprowadzany przez Lighthouse audyt skuteczności „Wydajnie koduj obrazy” może Cię poinformować, czy obrazy JPEG na Twojej stronie są optymalnie skompresowane.

  • Aby wyświetlić podgląd witryny, naciśnij Wyświetl aplikację, a następnie Pełny ekran pełny ekran.
  • Uruchom kontrolę wydajności Lighthouse (Lighthouse > Opcje > Wydajność) w aktywnej wersji Glitch i sprawdź, czy kontrola Wydajne kodowanie obrazów została zaliczona.

Przechodzenie audytu „Wydajnie koduj obrazy” w Lighthouse

Gotowe! Użyto Imagemin do optymalnej kompresji obrazów na stronie.