Рабочий кейс: Миграция небольшого проекта на Vue 3

Хочу поделиться результатами перехода на Vue 3. Сколько это заняло, при каких изначальных вводных и какой результат я получил в итоге.

Исходные вводные: Небольшой проект с 20 маршрутами и небольшим количеством зависимостей, разработанный на Vue 2. Имелось несколько библиотек, вроде vuex-persistedstate, для которых не было аналогов под Vue 3. На фронтенде присутствовала минимальная логика.

Весь процесс миграции занял примерно 3 часа, включая рефакторинг страниц и компонентов на основе Composition API. Один из интересных моментов миграции был связан с заменой vuex-persistedstate на кастомный плагин, что оказалось довольно легко:

export const localStoragePlugin = store => {
  store.subscribe((mutation, state) => {
    localStorage.setItem('store', JSON.stringify(state));
  });

  const savedState = localStorage.getItem('store');
  if (savedState) {
    store.replaceState(JSON.parse(savedState));
  }
};

Также стоит отметить, что миграция на Vue 3 была значительно упрощена благодаря возможности ChatGPT по рефакторингу из Options API в Composition API. Это значительно ускорило процесс и повысило качество конечного результата. Единственное, что мне пришлось делать вручную, это рефакторинг кода, связанного с v-model, который изменился с выходом Vue 3.

Что дала миграция на Vue 3?

• Во-первых, размер bundle-сборки уменьшился на 30%, что значительно улучшило производительность приложения.
• Во-вторых, время прохождения CI\CD существенно сократилось. Ранее пайплайн выполнялся за 6 минут (в среднем), а теперь занимает всего 2 минуты. Если внедрить кэширование зависимостей, процесс будет ещё быстрее, особенно учитывая, что установка пакетов занимает почти половину времени выполнения пайплайна. На проекте мы пока не настроили кэширование в GitLab.
• В-третьих, объём написанного кода сильно уменьшился.