remix: Vite with Large Apps: Very slow initial request and slow subsequent requests

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Adding per a Discord discussion with @pcattori. Given a large app with many routes and components, the first page request after starting vite dev can result in hundreds of network requests. In my case most pages make around 250-300 requests, but another person in that same discussion had close to 600. In addition, every following request to any route (via navigation or actions/loaders) has a significant delay (2+ seconds per page for me). Including both of these issues together since they seem closely related in the way the plugin works.

Slow Initial Request

In my case, the first page request stalls for around 12 seconds while vite does its thing. After this, the app appears to load, but is not responsive for another 12 seconds while it runs 250 network requests for individual components and dependencies. This seems to be a common issue with Vite in dev mode due to the lack of bundling. But there may be some optimization opportunities on the remix plugin side.

I first ran vite dev and loaded a page, which let vite do it’s initial new dependencies optimized... thing. I then restarted vite and ran vite dev --profile, made a browser request, then loaded the profile result into speedscope.app. Looking at it in Left Heavy mode, the time spent in resolveConfig and then flatRoutes is close to 9 seconds total. This is because resolveConfig is being called every time the plugin is loaded, which happens for each individual request. So even though it runs relatively quickly (around 30ms in my case), it’s running hundreds of times and returning the same result every time. My initial thought was to cache the results of resolveConfig, but adding/renaming routes will break.

The next largest bottleneck in the remix plugin is at the transform function for remix-remix-react-proxy. For my initial page load, it’s spending around 3-4 seconds here, most likely due to parsing the code of every single file in my project to see if it has “@remix-run/react” in it.

Slow Subsequent Requests

The transform bottleneck above is also causing subsequent requests to have a delay of 2+ seconds for me, which includes any navigation or calling any loaders/actions. This also slows down HMR – even though vite almost instantly sends the updated component to the browser, rendering is paused while HDR re-runs the loader.

The plugin is set to invalidate the server build on every request, which causes all of the routes to be re-transformed. Since it’s only re-transforming the routes and not every component, it is only taking 2 seconds instead of 3-4 like the initial page load, but it’s enough to make the app feel very sluggish in development.

I tried commenting out the code that invalidates the server modules which makes the app very responsive after the initial load. But it has the same downside as caching resolveConfig: I now have to restart vite dev any time I add or rename routes. @pcattori mentioned figuring out a way to only invalidate when the changed files include routes or the config.

Expected Behavior

Reasonably quick development mode. Definitely not expecting the performance of a small 3-page app, but right now it’s a significant slowdown from the old remix dev server (which took around 10 seconds for the initial build/page load).

Actual Behavior

25 second initial loads and sluggish navigation on following loads.