Шаг 6. Итог

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

Вводим команду:

npm run build

Результат после сборки в консоли
Результат после сборки в консоли

Результат после сборки в директории проекта
Результат после сборки в директории проекта

Предупреждения остались, но только те, что касаются изображений. Вместе с тем мы уменьшили размер картинок.

На самом деле оптимизировать изображения — кропотливый процесс. Нет единой эталонной реализации, как это должно выглядеть и работать, ведь возможности JS и наша фантазия безграничны.

Мы же уменьшили размер картинок с 7 МБ до 3 МБ и не сильно потеряли в их качестве. Неискушённый пользователь вряд ли заметит разницу. При этом мы выиграли в скорости загрузки страницы, а вот скорость сборки пострадала — увеличилась с двух до пяти секунд. При большом количестве изображений это будет заметно — за время сборки вы успеете погладить кота или даже выпить чашку чая.