Vovy builds a visual map of your bundle, names the heavy libraries hiding in it, and swaps or lazy-loads them so your first page load gets lighter.
My app's JavaScript bundle is huge, find what's bloating it
How it works
- Measure the current bundle: Vovy runs npm run build and reads the output sizes. The bundle is all the JavaScript a visitor downloads before your app works.
- Draw the bundle map: It adds a bundle analyzer, rollup-plugin-visualizer for Vite or @next/bundle-analyzer for Next.js, and opens the treemap of what is inside.
- Name the heavy libraries: A card lists the biggest packages, like a full icon set, moment.js or a chart library loaded on every page, with their size.
- Lazy-load and swap: Cursor makes rarely used pages load on demand and switches bulky imports to lighter ones, showing you each diff first.
- Show the savings: Vovy rebuilds and shows before and after sizes in KB, then reruns PageSpeed to confirm the "Reduce unused JavaScript" warning shrank.
What you provide
- Your project on your Mac
- Your live site URL
What you get
- Visual map of your bundle
- Heaviest packages named
- Lazy-loaded routes
- Before and after sizes
FAQ
How big is too big?
For the first page, keep compressed JavaScript under roughly 200KB. Phones on slow networks feel every extra 100KB.
Could removing a library break something?
Swaps are tested with a build and a quick click-through. Vovy only lazy-loads code, it does not delete features.
Does my Lovable or Bolt project support this?
Yes. Both export Vite projects, and the analyzer and lazy-loading work the same way.
Related tasks
All tasks