Рабочий кейс: Миграция небольшого проекта на 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.
- В-третьих, объём написанного кода сильно уменьшился.