Сплитекс

Сплитекс — большой корпоративный сайт производителя промышленного оборудования (наследник Sulzer Chemtech в России). Фронтенд мне достался готовым и живым: там уже были GSAP-анимации, карты, свайперы — вся визуальная часть. Жила она в двух файлах, main.js и main.css, одним нераздельным куском, и развивать её дальше в таком виде становилось всё тяжелее.

Я взялся приводить это в порядок. Стили разбил на SCSS-модули и переписал — из примерно восьми тысяч строк CSS больше семидесяти процентов прошли через мои руки; логику перевёл на TypeScript. Со сборкой сначала попробовал Vite, но он не сошёлся с требованиями Bitrix, и я пересобрал пайплайн на Gulp. На выходе — два бандла, глобальный и под главную, каждый со своим оркестратором: он поднимает только нужный странице код, и если один модуль падает, остальные продолжают работать.

Параллельно росли и фичи. Секция, которая на скролле разворачивается во весь экран и морфится в список. Карусель с настоящей физикой: инерция, сопротивление на краях, доводчик. Хедер, где полноэкранное меню, поиск, плавающая кнопка и cookie-плашка не мешают друг другу. Выдвижной футер с Lottie-анимацией.

Отдельная линия — производительность. GSAP со ScrollSmoother вёл себя тяжело и сам давал ощутимую часть фризов, так что часть анимаций я увёл на нативный sticky, а ScrollSmoother заменил на Lenis. В сумме: CSS с 1.2 МБ ужался до 143 КБ, JS — до ~153 КБ, PageSpeed на десктопе поднялся с 69 до 89.

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