Переделал свои старые проекты
Этой осенью я взял свои старые вёрстки и переделал их на том, чем пользуюсь сейчас. Четыре проекта: магазин Print Bar, два конструктора для него же и сайт «Сибирской коллекции». Делал не ради красоты, а чтобы честно посмотреть, сколько лишнего мы раньше тащили на страницу.
Магазин Print Bar
Вёрстку магазина я вёл с 2019 года: 37 шаблонов, больше сотни промо-баннеров, праздничные темы. Тогда это был jQuery с двумя десятками плагинов и сборка, где каждый файл жил отдельно. Главная страница подключала 32 файла стилей и 20 скриптов.
В новой версии jQuery нет совсем, всё собирается в один файл. На главной теперь 3 файла стилей и 1 скрипт, вес страницы упал с 1,35 МБ до 0,38 МБ. Шрифты весили 1,2 МБ, стали 80 КБ: я оставил только нужные символы. Иконки переехали из шрифта в SVG-спрайт, окна стали нормальными dialog, по сайту можно ходить с клавиатуры.
Посмотреть: printbar.luckyman.name.
Конструктор World of Tanks
Это конструктор одежды для игроков: выбираешь вещь и принт, пишешь ник и клан, добавляешь до трёх боевых медалей. Первую версию я сделал в 2019 году на Fabric.js и jQuery.
Сейчас переписал его вообще без библиотек. Картинку собираю на обычном Canvas 2D из текущего состояния, код разбит на 13 модулей со своим маленьким хранилищем. Скрипты похудели с 530 КБ до 102 КБ, и большая часть из них теперь данные медалей, а не код.
Посмотреть: printbar-wg.luckyman.name.
Конструктор принтов
Главный конструктор Print Bar, где люди собирают свой принт на футболке. Его я перевёл с пятой версии Fabric.js на седьмую и убрал jQuery. Заодно добавил то, чего давно не хватало: файл можно просто перетащить на холст, дизайн сам сохраняется и предлагает продолжить, есть горячие клавиши и своя корзина.
Посмотреть: printbar-print.luckyman.name.
Сибирская коллекция
Сайт бренда пельменей с поэкранным листанием. В 2020 году листание держалось на fullPage.js и jQuery. В новой версии я написал его сам: экраны листаются колесом, стрелками и пальцем, а кто не любит анимацию, получает обычный скролл. Скрипты 114 КБ превратились в 13 КБ, видео на первом экране с 30 МБ ужалось до 5,6 МБ, страниц стало 12 вместо 5.
Посмотреть: sibircollection.luckyman.name.
Что я из этого вынес
Почти всё, ради чего раньше подключалась библиотека, браузер теперь умеет сам: окна, плавное листание, отслеживание видимости, перетаскивание файлов. Самый большой выигрыш дали не хитрые оптимизации, а простое «убрать лишнее»: шрифты без ненужных символов, один бандл вместо двадцати файлов, картинки в AVIF и WebP. Если у вас сайт на jQuery из 2019 года, скорее всего, его можно облегчить в несколько раз, не меняя дизайн.
