Korzystanie z Imagemin i Webpack

Katie Hempenius

Konfigurowanie wtyczki Imagemin Webpack

Ten błąd zawiera już webpack, webpack-cli i imagemin-webpack-plugin. Aby dodać konfigurację Imagemin, musisz edytować plik webpack.config.js.

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

• Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

• Najpierw zadeklaruj wtyczkę Imagemin, dodając ten kod na górze strony webpack.config.js:

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

• Następnie dodaj poniższy kod jako ostatni element w tablicy plugins[]. Spowoduje to dodanie Imagemin do listy wtyczek używanych przez pakiet webpack:

new ImageminPlugin()

✔✔ Zameldowanie

Pełny 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ę pakietu internetowego, która kompresuje obrazy za pomocą programu Imagemin.

Uruchom pakiet internetowy

• Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
• Aby skompresować obrazy, uruchom pakiet webpack, wpisując w konsoli to polecenie:

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

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

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

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

Tym razem w pakiecie internetowym pojawi się ostrzeżenie informujące, że pliki PNG, mimo pewnej kompresji, nadal przekraczają zalecany limit rozmiaru. (Tryby development i production pakietu internetowego nadają priorytet różnym elementom, dlatego to ostrzeżenie wyświetla się tylko wtedy, gdy pakiet internetowy działa w trybie produkcyjnym).

Aby usunąć to ostrzeżenie, dostosuj konfigurację naszej usługi Imagemin.

Dostosuj konfigurację Imagemin

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

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

Ten kod umożliwia usłudze Imagemin kompresowanie plików PNG za pomocą wtyczki Pngquant. Pole quality używa zakresu wartości min i max do określania poziomu kompresji – 0 to najniższa wartość, a 1 – najwyższa. Aby wymusić kompresowanie wszystkich obrazów z wysoką jakością 50%, przekaż 0.5 jako wartość minimalną i maksymalną.

✔✔ Zameldowanie

Twój 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 JPEG? Projekt zawiera też obrazy JPEG, więc musisz też określić sposób ich kompresji.

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 umożliwia określenie jakości kompresji JPG. Już zainstalowaliśmy wtyczkę Mozjpeg w tym glitchu, ale musisz edytować plik webpack.config.js:

• Zainicjuj wtyczkę imagemin-mozjpeg, dodając ten wiersz u góry pliku webpack.config.js:

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

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

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

Ten kod informuje pakiet internetowy, aby za pomocą wtyczki Mozjpeg skompresował pliki JPG do jakości 50 (najniższa ocena to 0, a najlepsza 100).

Jeśli dodajesz ustawienia wtyczki, która jest wtyczką domyślną 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), musisz je dodać do 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})]
    })
  ]
}

Ponowne uruchamianie pakietu internetowego i sprawdzanie wyników za pomocą Lighthouse

• Uruchom ponownie pakiet internetowy w konsoli:

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

Świetnie. Wprowadzone zmiany powinny rozwiązać problemy dotyczące ostrzeżeń o pakiecie internetowym.

Webpack wyświetla ostrzeżenie przed dużymi obrazami, ale nie informuje, czy obrazy są nieskompresowane czy nieskompresowane. Dlatego do sprawdzania zmian warto zawsze używać Lighthouse.

Podczas kontroli wydajności „Efektywnie koduj obrazy” w Lighthouse możesz sprawdzić, czy obrazy JPEG na Twojej stronie są optymalnie skompresowane.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
• Uruchom audyt wydajności Lighthouse (Lighthouse > Opcje > Wydajność) w opublikowanej wersji Glitch i sprawdź, czy kontrola efektywnie koduj obrazy została zaliczona.

Success! Obrazy na stronie zostały optymalnie skompresowane za pomocą programu Imagemin.