Korzystanie z Imagemin i Webpack

Katie Hempenius

Konfigurowanie wtyczki pakietu Imagemin Webpack

Ta usterka zawiera już te elementy: webpack, webpack-cli i imagemin-webpack-plugin Aby dodać konfigurację Imagemin, musisz: aby edytować plik webpack.config.js.

Istniejące webpack.config.js dla tego projektu kopiują obrazy z: katalogu images/ do katalogu dist/, ale nie na ich skompresowanie.

• Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

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

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

• Następnie dodaj poniższy kod jako ostatni element w tablicy plugins[]. Ten dodaje Imagemin do listy wtyczek używanych przez pakiet internetowy:

new ImageminPlugin()

✔✔

Twój 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ę pakietu internetowego, która kompresuje obrazy za pomocą Imagemin.

Uruchom pakiet internetowy

• Kliknij Terminal (uwaga: jeśli nie widzisz przycisku terminala, włącz pełny ekran).
• Aby skompresować obrazy, uruchom pakiet webpack, wpisując następujące polecenie w konsola:

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

Ale co się stanie, jeśli uruchomisz pakiet webpack w trybie produkcyjnym?

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

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

Tym razem pakiet internetowy wyświetla ostrzeżenie z informacją, że plik PNG mimo pewnej kompresji, w dalszym ciągu przekracza zalecany rozmiar. (tryby development i production pakietu internetowego nadają priorytet różnym rzeczom, które dlatego to ostrzeżenie pojawia się tylko podczas uruchamiania pakietu internetowego w trybie produkcyjnym).

Dostosuj konfigurację Imagemin, aby usunąć to ostrzeżenie.

Dostosuj konfigurację Imagemin

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

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

Ten kod informuje Imagemin, że ma skompresować pliki PNG za pomocą wtyczki Pngquant. Pole quality używa zakresu wartości min i max do określenia poziom kompresji – 0 – najniższy, a 1 – najwyższy. Aby wymusić na wszystkich obrazach należy skompresować z jakością 50%, przekazać 0.5 jako wartość minimalną i maksymalną.

✔✔

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 plikami JPEG? Projekt zawiera też obrazy JPEG, więc określ jak są one kompresowane.

Dostosowywanie konfiguracji Imagemin (ciąg dalszy)

Zamiast używać domyślnej wtyczki imagemin-webpack-plugin do kompresji JPG (imagemin-jpegtran), użyj wtyczki imagemin-mozjpeg. W przeciwieństwie do Jpegtrana Mozjpeg pozwala określić jakość kompresji JPG. Poniżej masz już zainstalowaną wtyczkę Mozjpeg w tej zakłóceniu, ale musisz edytuj plik webpack.config.js:

• Zainicjuj wtyczkę imagemin-mozjpeg, dodając ten wiersz w polu początku pliku webpack.config.js:

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

• Dodaj do obiektu przekazywanego do ImageminPlugin() właściwość plugins, tak by obiekt wygląda teraz tak:

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

Ten kod informuje pakiet internetowy, że ma skompresować pliki JPG do jakości 50 (0 oznacza najgorszą sytuację; 100 to najlepsza wartość) za pomocą wtyczki Mozjpeg.

Jeśli dodajesz ustawienia wtyczki, która jest domyślną wtyczką imagemin-webpack-plugin, można je dodać jako para klucz-obiekt w obiekcie przekazano do: ImageminPlugin(). Dobrym przykładem są ustawienia Pnquant to osiągnąć.

Jeśli jednak dodajesz ustawienia dla wtyczek innych niż domyślne (na przykład Mozjpeg), należy je dodać, umieszczając je w tablicy odpowiadającej właściwość plugins.

✔✔

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

Ponownie uruchom pakiet internetowy i sprawdź wyniki za pomocą Lighthouse

• W konsoli ponownie uruchom pakiet webpack:

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

Hurra! Zmiany powinny rozwiązać ostrzeżenia pakietu internetowego.

Webpack ostrzega o dużych obrazach, ale nie informuje, czy obrazy nieskompresowane lub nieskompresowane. Właśnie dlatego zawsze warto używać Lighthouse, aby zweryfikować zmiany.

„Efektywnie koduj obrazy” w Lighthouse może określić, czy obrazy JPEG na stronie są optymalnie kompresowane.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
• Przeprowadź audyt wydajności w Lighthouse (Lighthouse > Opcje > Skuteczność). na aktywnej wersji błędu i sprawdź, czy funkcja obrazy zostały zaliczone.

Gotowe! Udało Ci się użyć programu Imagemin, aby optymalnie skompresować obrazy na stronie.