Клиент и контекст
Растущая платформа-маркетплейс имела backend на Laravel и front-end на базе Vue. Со временем производительность и сопровождаемость ухудшились:
- Изначальная архитектура и зависимости были разработаны несколько лет назад.
- Сборки front-end стали огромными и медленными.
- Время загрузки страниц было высоким, а SEO ухудшалось.
Клиент хотел продолжать добавлять функциональность, но платформе требовалось серьёзное техническое обновление.
Проблемы
- Медленный front-end: полная загрузка страницы занимала около 6,5 секунды, что влияло на пользовательский опыт и конверсии.
- Чрезмерно большой bundle: JavaScript bundle вырос до примерно 1,6 GB, со значительным временем сборки и множеством устаревших зависимостей.
- Устаревший стек: проект оставался на Vue 2 с toolchain на базе Webpack.
- Тяжёлые фоновые задачи: некоторые запланированные задачи базы данных выполнялись по несколько минут.
- Безопасность и сопровождение: уязвимости npm-зависимостей накапливались со временем.
Что я сделал
1. Миграция Vue 2 → Vue 3 и модернизация pipeline сборки
- Спланировал и реализовал поэтапную миграцию с Vue 2 на Vue 3, сохраняя работоспособность приложения на всём протяжении.
- Заменил старую сборку на базе Webpack на современный toolchain на базе esbuild.
- Удалил неиспользуемые зависимости и при необходимости разделил bundles.
Эффект:
- Размер bundle уменьшился с ~1,6 GB до ~300 MB.
- Время сборки улучшилось примерно в 3 раза.
- Количество уязвимостей npm снизилось до нуля после обновления и очистки зависимостей.
2. Улучшения производительности и PageSpeed
- Выполнил профилирование front-end и backend, чтобы выявить основные узкие места, влияющие на время загрузки.
- Оптимизировал критические пути рендеринга, сократил лишние запросы и улучшил кеширование.
- Устранил CLS (Cumulative Layout Shift) и другие проблемы Web Vitals.
- Исправил проблемы SSR (server-side rendering), которые ухудшали SEO и производительность первичного рендера.
Эффект:
- Полное время загрузки страницы улучшилось с ~6,5 секунды до примерно 1 секунды на ключевых представлениях.
- Оценки PageSpeed существенно выросли, улучшив и SEO, и пользовательский опыт.
3. Оптимизация backend и базы данных
- Проанализировал тяжёлые SQL jobs и длительно выполняющиеся запланированные задачи.
- Переписал запросы, добавил индексы и улучшил дизайн jobs, чтобы снизить нагрузку и конкуренцию за ресурсы.
Эффект:
- Некоторые jobs сократились с выполнения в течение минут до завершения за секунды, высвободив ресурсы и снизив операционные риски.
4. Разработка функциональности: платежи, auth, стриминг
Параллельно с улучшением производительности я также реализовал и расширил ключевые функции маркетплейса:
- Настройка и интеграция Stripe Connect для многопартийных платежей.
- Social logins и улучшения аутентификации.
- Функции, связанные с live/streaming interactions (чат/коммуникации) на платформе.
Это обеспечило, что техническая модернизация была не просто внутренним рефакторингом, а также дала заметную продуктовую ценность.
Результаты
- Маркетплейс стал значительно быстрее и приятнее в использовании.
- Front-end стек был приведён к современному, сопровождаемому состоянию с Vue 3 и эффективным pipeline сборки.
- Риски безопасности и сопровождения из-за устаревших зависимостей и уязвимостей были существенно снижены.
- Команда смогла двигаться дальше с новой функциональностью на прочной технической базе, вместо того чтобы постоянно «бороться» с платформой.
Технологии и обязанности
- Роль: Senior full-stack engineer / лидер модернизации
- Технологии: Laravel, Vue 2→3, esbuild, npm, SQL, Stripe Connect, SSR, Web Vitals, background jobs
- Объём работ: архитектура, практическая реализация, настройка производительности, рефакторинг, разработка функциональности и техническое сопровождение
Если ваш продукт на Laravel/Vue/React работает медленно, хрупок и его сложно развивать, я могу помочь вам модернизировать его шаг за шагом, продолжая при этом поставлять новую функциональность.
Назад ко всем кейсам
