Page reload on dev server is very slow in large codebase

Describe the bug

In issue https://github.com/vitejs/vite/issues/3208

You’ve asked to code example, so I’ve created one: https://github.com/michalzubkowicz/slow-vite-demo

Problem is that when are many components involved, compilation and reload times are very slow, much more than same app built with Webpack. Example app starts up on my computer more than 10 second (I mean app startup in browser, not a HTTP server startup). Reload times are quite long in comparison to even bigger apps built with Webpack

There is also Firefox bug I’ve found that make whole thing worse: https://bugzilla.mozilla.org/show_bug.cgi?id=1125322 It causes that Vite is quite unusable.

In Chrome (or other webkit browser) situation looks better, but still, loading many components (for example 2000) it I think this problem can be leveraged with proper use of <Suspense> in React, but it needs some work.

Hope this time this report will be helpful

Reproduction

https://github.com/michalzubkowicz/slow-vite-demo

System Info

System:
    OS: Linux 5.16 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 4.93 GB / 15.32 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.19.1 - /run/user/1000/fnm_multishells/153575_1649063119273/bin/node
    npm: 8.6.0 - /run/user/1000/fnm_multishells/153575_1649063119273/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Firefox: 98.0.2
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.0 
    vite: 2.9.1 => 2.9.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[jjbell150]

+1 I’m having the exact same issue with Vite 2.9.1 on a large React project, startup is instant but loading the page takes 60 seconds to fully load with constant timeouts and refreshes, would be great to have this fixed

[michalzubkowicz]

I apologize for the wrong wording here. It’s not a flaw, but more a design decision. In Vite every component is treated as a separate file. This approach needs to build applications in such a way, that everything is lazy loaded to not load ALL components on every reload. You cannot just switch from CRA (Create React App) or even plain Webpack to Vite in a large project and expect that everything will work better out of the box.

It’s wise to choose the right tool for the job, if you cannot do lazy loading probably Vite can be not the best choice, maybe you need some adjustments.