Шаг 2. Определение задач для оптимизации

Из того, что мы имеем, вызывают вопросы только шрифты — у них слишком большой размер. Мы знаем наверняка, что наш проект должен собираться за минимальное количество времени и бесперебойно работать при запущенном сервере разработки (devServer).

Давайте «утяжелим» наш бандл. Добавим к проекту несколько изображений в высоком разрешении.

Сейчас функциональность приложения не несёт какой-либо смысловой нагрузки — нас больше интересует кейс, где мы оптимизируем конфиг под существующий проект.

После добавления изображений соберём проект и посмотрим, всё ли корректно — не перепутаны ли пути. Для этого в консоли редактора вводим команду:

npm run build

При сборке в продакшн-режиме мы получаем предупреждения:

Мы добавили два изображения, которые в сумме весят около 7 МБ, что превышает допустимый размер. Время сборки составило 2159 мс.

В реальной ситуации пользователи хотят увидеть на экране качественную картинку, причём в проектах обычно больше изображений, чем у нас. Поэтому нам необходимо понять, как и какие оптимизации нужно применить, чтобы приложение после сборки имело максимальную производительность — ведь производительность напрямую зависит от размера. И вместе с этим нужно учитывать, что в команде могут присутствовать дизайнеры, которым мы предоставляем (либо они нам) изображения в несжатом виде. Например, SVG.

С оптимизацией картинок нам поможет официальная документация webpack v5, а со шрифтами — пакет fontmin-webpack, его мы уже рассматривали.

В документации расписано два варианта оптимизации изображений:

• с потерей качества — Lossy;
• без потери — Lossless.

Мы выбираем первый вариант, чтобы посмотреть, насколько это замедлит работу.

Для оптимизации нам понадобятся пакеты:

• fontmin-webpack,
• image-minimizer-webpack-plugin,
• imagemin,
• imagemin-mozjpeg,
• imagemin-gifsicle,
• imagemin-pngquant,
• imagemin-svgo.

Устанавливать их мы будем с флагом -D, так как это зависимости для разработки. То есть все пакеты должны отрабатывать при выполнении команды по сборке — npm run build. Они не должны попасть в бандл — файл, появляющийся после сборки.

Пакеты умещаются в одну команду для их загрузки:

npm i -D image-minimizer-webpack-plugin fontmin-webpack imagemin imagemin-mozjpeg imagemin-gifsicle imagemin-pngquant imagemin-svgo

Их настройку мы рассмотрим в следующих шагах.

Нет разницы, где вы поставите флаг -D при установке — в начале или конце. Главное, чтобы он шёл после i (install).

Также стоит упомянуть о сжатии стилей, ведь MiniCssWebpackPlugin не справляется с этой с этой задачей по максимуму. Такой случай легко воссоздать: нужно лишь добавить пакет normalize.css (сбор стилей), и плагин не сможет его сжать. Здесь на помощь приходит другой плагин — CssMinimizerWebpackPlugin.