Настройте плагин Imagemin webpack
В этом сбое уже есть webpack, webpack-cli и imagemin-webpack-plugin. Чтобы добавить конфигурацию для Imagemin, вам нужно отредактировать файл webpack.config.js.
Существующий файл webpack.config.js для этого проекта копирует изображения из каталога images/ в каталог dist/, но не сжимает их.
- Нажмите Создать ремикс, чтобы сделать проект редактируемым.
- Сначала объявите плагин Imagemin, добавив следующий код в начало файла
webpack.config.js:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- Затем добавьте следующий код в качестве последнего элемента в массив
plugins[]. Это добавляет Imagemin в список плагинов, которые использует webpack:
new ImageminPlugin()
✔︎ Регистрация
Теперь файл webpack.config.js должен выглядеть следующим образом:
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()
]
}
Теперь у вас есть конфигурация webpack, которая сжимает изображения с помощью Imagemin.
Запустите webpack
- Нажмите Терминал. Если вы не видите эту кнопку, перейдите в полноэкранный режим.
- Чтобы сжать изображения, запустите webpack, введя в консоли следующую команду:
webpack --config webpack.config.js --mode development
Но что произойдет, если вы запустите webpack в производственном режиме?
- Снова запустите webpack, но на этот раз в производственном режиме:
webpack --config webpack.config.js --mode production
На этот раз webpack отображает предупреждение, сообщающее, что ваши PNG-файлы, несмотря на некоторое сжатие, все же превышают рекомендуемый предел размера.
(В режимах development и production webpack приоритет отдается разным вещам, поэтому вы видите это предупреждение только при запуске webpack в производственном режиме.)
Чтобы устранить это предупреждение, настройте конфигурацию Imagemin.
Настройте конфигурацию Imagemin
Добавьте настройки для сжатия изображений PNG, передав в ImageminPlugin() следующий объект:
{pngquant: ({quality: [0.5, 0.5]})}
Этот код указывает Imagemin сжимать PNG с помощью плагина Pngquant. Поле quality использует диапазон значений от min до max для определения уровня сжатия, где 0 – самый низкий, а 1 – самый высокий. Чтобы принудительно сжать все изображения до 50 % качества, передайте 0.5 в качестве минимального и максимального значения.
✔︎ Регистрация
Теперь файл webpack.config.js должен выглядеть следующим образом:
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]}),
})
]
}
А как насчет JPEG? В проекте также есть изображения JPEG, поэтому вам также следует указать, как они сжимаются.
Настройка конфигурации Imagemin (продолжение)
Вместо стандартного плагина imagemin-webpack-plugin для сжатия JPG (imagemin-jpegtran) используйте плагин imagemin-mozjpeg. В отличие от Jpegtran, Mozjpeg позволяет задать качество сжатия JPG. Мы уже установили плагин Mozjpeg в этом проекте Glitch, но вам нужно отредактировать файл webpack.config.js:
- Инициализируйте плагин
imagemin-mozjpeg, добавив следующую строку в начало файлаwebpack.config.js:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Добавьте свойство
pluginsв объект, передаваемый вImageminPlugin(), чтобы объект выглядел следующим образом:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Этот код указывает webpack сжимать файлы JPG до качества 50 (0 – худшее, 100 – лучшее) с помощью плагина Mozjpeg.
Если вы добавляете настройки для плагина, который является плагином по умолчанию для imagemin-webpack-plugin, их можно добавить в виде пары "ключ-объект" в объекте, переданном в ImageminPlugin(). Настройки Pnquant – хороший пример.
Однако если вы добавляете настройки для плагинов, не используемых по умолчанию (например, Mozjpeg), их нужно добавить в массив, соответствующий свойству plugins.
✔︎ Регистрация
Теперь код должен выглядеть так:
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})]
})
]
}
Повторно запустите webpack и проверьте результаты с помощью Lighthouse
- В консоли перезапустите webpack:
webpack --config webpack.config.js --mode production
Отлично! Предупреждения webpack должны исчезнуть.
webpack предупреждает вас о больших изображениях, но не может сказать, являются ли изображения несжатыми или недостаточно сжатыми. Вот почему всегда полезно использовать Lighthouse для проверки изменений.
Проверка производительности Lighthouse "Эффективно кодируйте изображения" может сообщить вам, оптимально ли сжаты изображения JPEG на вашей странице.
- Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим)
. - Запустите аудит производительности Lighthouse (Lighthouse > Options > Performance) для рабочей версии Glitch и убедитесь, что аудит Efficiently encode images пройден.
Готово! Вы использовали Imagemin для оптимального сжатия изображений на странице.