Коли Бандл Стає Занадто Великим
Наша 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
Кожен пошук дебаунситься на 300ms і скасовує попередній запит через AbortController.
5. Preloading На Hover
При наведенні на посилання починаємо завантажувати чанк маршруту. До кліку компонент вже в кеші.
Результат: Lighthouse з 62 до 94. TTI з 4.2s до 1.4s.
Що думаєте?
