Сплитекс — портал производителя промышленного оборудования. Фронтенд мне достался живым и работающим: анимация, карты и слайдеры уже стояли. Лежало всё это в двух файлах, `main.css` и `main.js`, и в таком виде дальше не росло.
Первым делом разложил на части: стили в SCSS-модули, логику на TypeScript. Сборку сначала попробовал перенести на Vite, но он не сошёлся с тем, как Bitrix отдаёт статику, и пайплайн я пересобрал на Gulp. На выходе два бандла, общий и для главной, у каждого свой контроллер: он поднимает только тот код, который нужен текущей странице, и падение одного модуля не роняет остальные.
Больше всего времени ушло даже не на этот рефакторинг, а на анимации. Секция, которая на скролле разворачивается во весь экран и превращается в список, карусель с инерцией и сопротивлением на краях, выдвижной футер с Lottie. Всё на GSAP, и всё должно работать с зумом и произвольный ресайзом. Плавный скролл сначала сделал на ScrollSmoother, раз GSAP уже стоял, но тот заметно нагружал страницу и конфликтовал со ScrollTrigger, так что заменил на Lenis.
Производительность оказалась отдельной работой, и не только фронтовой. PageSpeed на десктопе поднялся с 69 до 89, CSS ужался с 1,2 МБ до 143 КБ. Часть этого веса ушла не от чистки стилей: до перехода на Gulp картинки принудительно уезжали в base64. Остальное — разметка, ленивая загрузка, порядок обращений к сети и договорённость с бэкендером о том, в каком виде изображения попадают на сайт и скольно они должны весить. Полноценный `<picture>` протащить не вышло, зато картинки стали приходить оптимизированными.
От исходного кода в итоге осталось немного: SCSS и TypeScript, собранные в два бандла.