How can I improve performance for the "request waterfall" for Vite

[jeremiah-clothier]

Hello, I have a general open-ended question about the performance of vite and figured I'd start by asking on vite-ruby instead of vite. I'm not necessarily looking for someone to solve my problem, I expect it's quite complicated but I'm hoping someone with more Vite knowledge can point me in the right direction. I'm not sure what I should focus on to improve the load times in development.

Q1: What are some common strategies or things I should be looking at to improve performance on the "network waterfall" when the dev-server is running?

For context, I'm working in a large codebase that has ~4,000 (JS/TS/JSX/TSX) files and ~500 SCSS files. I love the startup time of the dev server and HMR when compared to webpack. However, the initial load times are quite slow. For example, it can take >50 seconds after logging in as a user for the page to load in local development. That is quite slow (example of request waterfall after logging in below). Reloads are a bit faster because the browser will cache resources, I'm interested in improving the initial load though.

Q2: Are there examples of other large repositories that are using vite-ruby and have reasonable load times in local development?

[ElMassimo]

Hi Jeremiah! @jeremiah-clothier

Since this isn't specific to Vite Ruby, I'd encourage you to ask in the Vite.js Discussions, since there are significantly more users in the broader ecosystem.

What are some common strategies or things I should be looking at to improve performance on the "network waterfall" when the dev-server is running?

When using Vite, the initial load time will be greatly reduced if you avoid loading any code that is not critical for the current page.

• Doing route-based code splitting, where each page is a separate dynamic import, ensures that each time you visit a page the browser only fetches the code associated with that particular page.
• Using dynamic imports for portions of the app that might not be needed until a certain condition is met is also a good way to speed up the initial load.
• Finally, since Vite uses the native browser imports, you can experiment by helping the browser discover additional imports sooner, by moving imports to your entrypoint files, which will allow the browser to request them in parallel instead of sequentially.

In combination, these three techniques can help to make the initial load in development faster, and the first two can also have a positive impact in the final production bundle and UX.