Vite slows down navigation due to dependency optimization

[jansedlon]

Hi, I have recently migrated to Vite however the experience is not really that great. When I start my server it optimizes a bunch of dependencies which is fine. However when i navigate between pages, it optimizes more dependencies but it takes anywhere from 2s-10s. Sometimes it blocks the navigation completely and i have to click the link again, sometimes it redirects after a second but an error shows up for a second that something is not yet available (for example @conform-to/react tries to use useRef which fails for a second).

Is there a way to fix it? Like force to optimize all possible dependencies beforehand? Or is it a problem in vite with remix itself?

[jrestall]

Maybe Vite's warmup support can help. https://vitejs.dev/guide/performance#warm-up-frequently-used-files

If you think the remix plugin is to blame you can confirm by installing vite-plugin-inspect which will show the timings of each plugin. https://www.npmjs.com/package/vite-plugin-inspect

[jansedlon]

Thank you, however i didn't really find anything interesting :/ What @hi-ogawa said helped. Not sure if there are any consequences

[hi-ogawa]

Like force to optimize all possible dependencies beforehand? Or is it a problem in vite with remix itself?

Vite provides optimizeDeps.entries https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-entries to achieve this, but as far as I know, it's not used by Remix. As explained in the doc, Vite automatically infers optimizeDeps.entries based on build.rollupOptions.input, but currently Remix doesn't set this either during dev, so Vite doesn't do any initial crawling.

Personally, I had a problem with e2e testing where some random window refresh during navigation makes tests too flaky, so I attempted to manually setup optimizeDeps.entries, which roughly looks like this:
(Note that my project haven't updated remix since 2.4.1, so things might have changed)

https://github.com/hi-ogawa/ytsub-v3/blob/f5074646e1ef45e671ea2f3fe28c236239173956/vite.config.ts#L71-L75
(EDIT: On this PR, I wrote more details about the idea hi-ogawa/ytsub-v3#536)

export default defineConfig({
  plugins: [
    // had to disable since false-positive error during optimizeDeps discovery?
    // https://github.com/remix-run/remix/pull/8267
    remix().filter((plugin) => plugin.name !== "remix-dot-server"),
  ],
  optimizeDeps: {
    // add this to crawl all routes
    entries: ["./app/entry-client.tsx", "./app/root.tsx", "./app/routes/**/*"],
  },
});

This worked in my case, but I have a little doubt that maybe some server only dependencies leak to client due to this.
(Note that optimizeDeps are dev only feature, so it shouldn't affect the build)

I haven't tested it but I think using server.warmup.clientFiles would be safer (though maybe slower or glitchy on initial request) since it goes through a same request pipeline.

It would be interesting if more people try server.warmup.clientFiles or optimizeDeps.entries so that we can provide feedback to Remix team.

[jansedlon]

@jrestall This is the best solution so far.

[rphlmr]

Thank you so much!

Mixing

 warmup: {
      clientFiles: [
        "./app/entry.client.tsx",
        "./app/root.tsx",
        "./app/routes/**/*",
      ],
    },

and

  optimizeDeps: {
    include: ["./app/entry.client.tsx", "./app/root.tsx", "./app/routes/**/*"],
  },

Fixe the app I'm working on! (rphlmr/remix-hono-vite@623f9c8)

[rphlmr]

@hi-ogawa what is "./app/entry-client.tsx" shouldn't be "./app/entry.client.tsx",?

[hi-ogawa]

@rphlmr Good catch! That's a typo. It's likely that entry.client.tsx will be crawled at first load anyway (or other pages already covers the same dependency), so I didn't notice it.

[caprica]

This seemed to fix my issue as well.

The out-of-the-box developer experience with Remix and Vite was very disappointing until I made the changes you described here.

For me, I would see all manner of glitchy behaviour, initial page errors, weird non-navigation navigations where sometimes it would go to a new page, sometimes it would refresh the page it was on before the navigation. Sometimes it would just get stuck, Weird half-rendered or unstyled pages until a manual refresh and so on and so on.

But the suggestion given here seemed to resolve things for my project, so far it's working nicely.