Верни мне мой 2017

Проект достался со сборкой из другой эпохи: Bower рядом с npm, Gulp 3 и Node.js 10. Локальная сборка — 40 минут, с риском упасть по пути. Единого сценария нет, результат зависит от порядка команд. Глаз дёргается. Кажется, в него попал 2017-й.

При неправильной сборке на страницу могли попасть одинаковые бандлы с разными версиями ассетов, ухудшая PageSpeed.

Первым делом собрал команды в Bash-скрипты для клиентской части и админки, зафиксировав правильную последовательность.

Затем разобрал самый долгий этап — uncss. Для разделов готовились тестовые HTML-страницы: списки и страницы просмотра. По ним плагин отбирал стили и формировал отдельные CSS-бандлы.

Выяснилось, что CSS уменьшался незначительно. При этом пропускались нужные правила, возникали проблемы с переопределениями стилей и рос CLS — показатель сдвигов макета. Потери перекрывали пользу. Убрал этот этап. Локальная сборка сократилась с 40 до 2 минут.

Заметно сократить объём статики удалось за счёт JavaScript: часть компонентов CanJS переписали на нативный JS и убрали тяжёлый бандл из критических зависимостей большинства страниц.

Отдельно обновил окружение: убрал Bower, оставив npm, перешёл с Gulp 3 на 4 и доработал зависимости. Это позволило поднять Node.js с 10 до 18 и упростило работу SRE: развёртывание новых инстансов и переезды больше не требовали прежних обходных решений.

Получили понятный порядок сборки, две минуты ожидания вместо сорока и меньше тяжёлого JS на страницах.

Такие дела!