Когда бандл становится слишком большим
Наша SaaS-платформа выросла до 200+ Vue компонентов, и время первоначальной загрузки превысило 4 секунды. Вот пять изменений, которые снизили его до 1,5 секунд.
1. Агрессивный code splitting
Вместо стандартного чанкинга Vite мы настроили manualChunks для разделения приложения по доменам — календарь, бронирование, клиника, ресторан. Каждая фича загружается только при навигации.
2. v-show вместо v-if для табов
Для табных интерфейсов v-show сохраняет DOM живым. Это сократило время переключения табов на 80%.
3. Виртуализированные списки
Любой список со 100+ элементами теперь использует virtual scrolling. Рендерим только видимое.
4. Debounce + AbortController
Каждый поиск дебаунсится на 300мс и отменяет предыдущий запрос через AbortController.
5. Preloading при hover
При наведении на ссылку начинаем загружать чанк маршрута. К клику компонент уже в кеше.
Результат: Lighthouse с 62 до 94. TTI с 4,2с до 1,4с.
Как вам?
