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 plikuwebpack.config.js
:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Dodaj właściwość
plugins
do obiektu przekazanego doImageminPlugin()
, 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.