How do you increase the speed of a project that has thousands of files?

[Nefcanto]

We were using CRA (create react app) and after a while, it took us more than a minute to compile. Then we migrated to Vite. After that, our project would be compiled in less than a second, but then we encountered a more serious problem.

Our project contains more than 2 thousand JSX files. It takes more than 50 seconds to load in the browser.

So, basically, the value of fast compilation is thrown out of the window because of the slowness in loading the app in the browser.

What would you do to make it faster?

Slow.mp4

See the pain we should tolerate to hit the refresh button?

[Nefcanto]

Any ideas?

[Nefcanto]

@namefhf that was almost two years ago. I don't remember exactly.

[Fernando-Espinosa]

Cra is not webpack, it’s an adaptation of webpack which was bloated. With webpack you need to use a cache configuration to read from files. That would reduce your local build time.

In what way is vite slow? On HMR. On every reload? On every navigation? Or only when you start the project?

[Nefcanto]

@Fernando-Espinosa vite is slow on every reload. As I have mentioned above, we have more than 2K files. It takes more than 50 seconds to load those files.

[Fernando-Espinosa]

One of the common issues is that apps are not code splitted. https://legacy.reactjs.org/docs/code-splitting.html
Another issue are barrel files.

[Nefcanto]

@Fernando-Espinosa barrel files are inevitable, especially for a project of more than 2K files split into more than 100 modules. There is no way to manage those ugly "../../../some-path/some-other-path/component" import paths. It has to be there.

Code splitting is a good technique. It was there from the beginning of the time. from the AJAX days. However it should not be a barrier for Vite to support more files.