When Your Bundle Gets Too Big
Our SaaS platform grew to over 200 Vue components and the initial load time started creeping past 4 seconds. Here are the five changes that brought it down to under 1.5 seconds.
1. Aggressive Code Splitting with Manual Chunks
Instead of relying on Vite's default chunking, we configured manualChunks to split our app by domain — calendar, booking, clinic, restaurant, etc. Each feature loads only when the user navigates to it.
2. Replace v-if with v-show for Tabs
For tabbed interfaces where users switch back and forth, v-show keeps the DOM alive and avoids re-rendering. This alone cut our tab-switch time by 80%.
3. Virtualized Lists for Large Data Sets
Customer lists, booking histories, invoice tables — any list with 100+ items now uses virtual scrolling. We render only what is visible in the viewport.
4. Debounced Search with AbortController
Every search input debounces by 300ms and cancels the previous request using AbortController. No more stale results racing with fresh ones.
5. Smart Preloading on Hover
When a user hovers over a navigation link, we start preloading that route's chunk. By the time they click, the component is already cached.
Result: Lighthouse performance score went from 62 to 94. Time to Interactive dropped from 4.2s to 1.4s.
What do you think?
