Поиграть можно тут (пишите фидбек)!
Видео нарендерил в remotion’e — оказалось удобно, переиспользовал половину компонентов из игры, 90% анимаций — интерполяция каких-то свойств по кардру.
Картинки нарисовал в фигме и анимировал в лотти.
Сама игра написана на реакте, на nextjs, zustand для работы со стейтом, dndkit.com для drag'n'drop'a, jest для тестов, cypress для e2e-тестов. Написал игру довольно быстро, потом посмотрел на производительность в Lighthouse — 27/100. Спасибо Дане за подсказки про оптимизацию фронта.
1. Next использует гидрацию — рендерит статическую страницу, которая показывается пользователю, а потом начинает выполняться JS. Для начальных компонентов (попап и сетка) сверстал статические заглушки (svg вместо лотти, сетка без логики).
2. Компоненты, которые долго не будет видно вроде результаты игры вынес в ssr: false, чтобы они рендерились, когда игра закончится.
3. Самая популярная библиотека для popup-ов работала плохо, так что переписал всё на html5-dialog.
4. Добавил мемоизацию всем компонентам.
5. Lottie анимации — JSON, описывающий все SVG-трансформации, попробовал сжать их gzip’ом — получилось около 90% оптимизации.
6. Оказалось, что большая часть бандла — проигрыватель lottie-анимаций. Переделал всё на dotlottie, который умеет проигрывать только svg-анимации. После этого всё уже было оранжево-зелёным, только советовало мне уменьшить размер бандла.
7. Пошёл смотреть минифицированный бандл глазами — огромная часть была занята quizlet-колодами (для игры нужно всего несколько карточек). Вынес всю эту логику в api-route, чтобы они не включались в бандл.
После этого performance score стал близким к 100, так что я успокоился. Отдельно пришлось развлекаться с e2e тестами: drag'n'drop то не регистрировал перетаскивание фигур, то отпускание.
Видео нарендерил в remotion’e — оказалось удобно, переиспользовал половину компонентов из игры, 90% анимаций — интерполяция каких-то свойств по кардру.
Картинки нарисовал в фигме и анимировал в лотти.
Сама игра написана на реакте, на nextjs, zustand для работы со стейтом, dndkit.com для drag'n'drop'a, jest для тестов, cypress для e2e-тестов. Написал игру довольно быстро, потом посмотрел на производительность в Lighthouse — 27/100. Спасибо Дане за подсказки про оптимизацию фронта.
1. Next использует гидрацию — рендерит статическую страницу, которая показывается пользователю, а потом начинает выполняться JS. Для начальных компонентов (попап и сетка) сверстал статические заглушки (svg вместо лотти, сетка без логики).
2. Компоненты, которые долго не будет видно вроде результаты игры вынес в ssr: false, чтобы они рендерились, когда игра закончится.
3. Самая популярная библиотека для popup-ов работала плохо, так что переписал всё на html5-dialog.
4. Добавил мемоизацию всем компонентам.
5. Lottie анимации — JSON, описывающий все SVG-трансформации, попробовал сжать их gzip’ом — получилось около 90% оптимизации.
6. Оказалось, что большая часть бандла — проигрыватель lottie-анимаций. Переделал всё на dotlottie, который умеет проигрывать только svg-анимации. После этого всё уже было оранжево-зелёным, только советовало мне уменьшить размер бандла.
7. Пошёл смотреть минифицированный бандл глазами — огромная часть была занята quizlet-колодами (для игры нужно всего несколько карточек). Вынес всю эту логику в api-route, чтобы они не включались в бандл.
После этого performance score стал близким к 100, так что я успокоился. Отдельно пришлось развлекаться с e2e тестами: drag'n'drop то не регистрировал перетаскивание фигур, то отпускание.