Slow initial load & refresh in dev mode after migrating from Webpack

[buondevid]

Hello,

We recently migrated our project from Webpack to Vite and noticed a significant slowdown in the DX. Specifically, the initial load or a full page refresh takes about 2–4 seconds.

This isn’t about HMR (which works fine) — the issue is with the very first load or when refreshing the app. In our workflow, we often need to refresh the page to re-run queries, and waiting several seconds each time is disruptive.

With Webpack, only the modules for the current view were loaded. In Vite, it seems the entire codebase is loaded in dev, which makes page navigation snappy but makes refreshes quite slow for us (we end up loading ~40MB of JS). To be clear, this doesn't happen in production where only the files needed for the view are loaded.

I’m wondering if there are solutions or ongoing work in this area. I came across related discussions:

• Page reload very slow, unbundle DX for large web app is not satisfactory #13697
• How to optimize large projects with dynamic imports and code splitting in ViteJS? #17730

From what I understand, one workaround is to switch to dynamic imports for all components, e.g.:

const MyComponent = () => import('./components/MyComponent');

But that feels like a cumbersome change just for improving dev-time reloads.

Is there any recommended approach, or possibly a config/setting planned that could address this?

Thanks in advance!

---

EDIT: Some correction to what I wrote: after some investigation, it looks like it's loaded everything in prod too, but since it's bundled together and super minified and compressed, it does in half second rather than 4. Then I'm not sure how Webpack was solving this problem for the dev server but it was a better experience.