Vue 3 и Vite — идеальная пара для современных SPA, но переход на Composition API может показаться сложным, если вы привыкли к Options API. В этой статье мы разберём, как мигрировать проект, настроить Vite и провести оптимизацию производительности, чтобы ваш код был быстрее и легче поддерживаемым. Мы сосредоточимся на практических шагах: обновление зависимостей, рефакторинг компонентов, настройка сборки и устранение узких мест в реактивности.
Разбор задачи
Миграция на Composition API требует от разработчика пересмотра структуры компонентов: data, computed, methods заменяются на ref, reactive, computed, watch. Это повышает гибкость и переиспользуемость кода, но может вызвать проблемы с производительностью, если реактивные объекты используются неэффективно. Vite, в свою очередь, предлагает быстрый старт, Hot Module Replacement и продвинутую обработку ES модуля. Однако без правильных настроек вы можете столкнуться с избыточными бандлами и медленной загрузкой. Наша задача — минимизировать размер бандла, ускорить время первого рендеринга и обеспечить плавную работу реактивности.
Пошаговое решение
1. Обновите проект до Vue 3, установив последние версии Vue, @vue/compiler-sfc и Vite. 2. Включите Composition API, заменив Options API в каждом компоненте: data → reactive, methods → функции, computed → computed. 3. Настройте Vite: в vite.config.js включите rollup-plugin-visualizer для анализа бандла, используйте tree-shaking, подключите @vitejs/plugin-vue. 4. Оптимизируйте реактивность: избегайте ненужных watch, используйте shallowRef для больших объектов, разделяйте state на независимые реактивные части. 5. Профилируйте сборку с помощью Webpack Bundle Analyzer, удалите неиспользуемые зависимости, примените lazy-loading роутов. 6. Настройте кеширование статических ресурсов в Nginx, включите HTTP/2 и gzip. 7. Проверьте производительность с Lighthouse, исправьте выявленные проблемы: удалите лишние CSS, минифицируйте JS, используйте prefetch для критичных скриптов. После выполнения этих шагов ваш проект будет работать быстрее, а код станет более модульным и легким для сопровождения.
Рабочий код
// пример перехода на Composition API с Vite
import { ref, computed, watch } from 'vue'
import { createApp } from 'vue'
import App from './App.vue'
// 1. создаём реактивные данные
const count = ref(0)
// 2. вычисляемое свойство
const doubled = computed(() => count.value * 2)
// 3. реакция на изменение
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
// 4. экспортируем в компонент
export default {
setup() {
return { count, doubled }
}
}
// 5. подключаем Vite
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})
Типичные ошибки
- Не использовать реактивные переменные, а напрямую менять props.
- Перепутать ref и reactive при вложенных объектах.
- Не оптимизировать watch: лишние вычисления внутри колбэка.
- Забыть об asyncSetup при асинхронных запросах.
FAQ
Как ускорить сборку Vite?
Включите esbuild для JS/TS и задайте pre-bundle для тяжёлых зависимостей. Используйте кэширование и включите tree-shaking.
Можно ли использовать Options API вместе с Composition API?
Да, но старайтесь держать логику в Composition API, чтобы избежать конфликтов реактивности и путаницы.
Как измерить производительность после миграции?
Используйте Lighthouse и Vue DevTools Performance, сравните время монтирования и FPS. Также смотрите на количество реактивных подписок.
Заключение и чек‑лист
- Проверьте все ref/reactive в setup.
- Оптимизируйте watch, добавьте deep:false/true по необходимости.
- Включите Vite plugins: vue, tsconfig-paths, legacy.
- Тестируйте сборку в продакшн режиме.
- Сравните метрики с Version 2.