All modules from other routes loaded
Perhaps I made a wrong assumption but let's say I have a route /auth and /dashboard and /settings.
Currently when I load /auth on development it loads ALL modules defined in the route files from /auth + /dashboard and /settings. Is this intended? I was expecting it to not to load the /dashboard and /settings chunks.
Or is the recommended way to move the route component to another file?
12 Replies
ratty-blushOP•3mo ago
it is tanstack start solidjs btw
ratty-blush•3mo ago
development preloading routes is because vite brings everything to the browser to run, so there is no problem, when building production, https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting will take care of the rest, you can customize the lazy if needed
Code Splitting | TanStack Router React Docs
Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application. Reduces the amount of code that needs to be loaded on initial page load Co...
ratty-blushOP•3mo ago
Tanstack Start uses automatic code splitting by default. This behavior currently invokes 2500 requests on the get go, dev loading time is 5-10 seconds
And yeah prod is fine, just talking about horrible DX
ratty-blush•3mo ago
Horrible DX? it's confusing that you're criticizing a lib that's in alpha stage as DX. so why not try to contribute pr for better quality, they are encouraging it 😁
ratty-blushOP•3mo ago
I have no problem with contributing and it's odd that you see pinpointing potential issue as critique, especially considering TanStack focus on delivering a great developer experience.
But anyways, I was wondering whether this is intended behavior or a bug.
national-gold•3mo ago
maybe it's a solid start specific thing
I haven't seen this with react
can you provide a reproducer repo?
ratty-blush•3mo ago
tanstack start is built based on vite, so vite brings all routes to the browser by default, unlike next, which builds routes at access time. If I say anything wrong, I hope you understand. 😅
national-gold•3mo ago
no I don't think that is what is happening. we still do code splitting on dev so a component only referenced on another route should not be loaded
ratty-blushOP•3mo ago
that would make sense. i'll post a reproduction tomorrow
Here's the reproduction:
https://stackblitz.com/~/github.com/jeroenpg/tanstack-solid-start-load-all-modules
I also have more info. This issue only happens with virtual routes (and potentially code based?), specifically when registering route that is NOT contained in the
In my reproduction you can see icons loaded on every route from bar.tsx, but not foo.tsx. I suppose we're not really supposed to load routes outside of the
routesDirectory specified in app.config.ts.In my reproduction you can see icons loaded on every route from bar.tsx, but not foo.tsx. I suppose we're not really supposed to load routes outside of the
routesDirectory, although you would expect this not to matter with virtual routes, but perhaps we need to bake in some fail safe warning/error - or instead we can fix the behaviornational-gold•3mo ago
I suppose we're not really supposed to load routes outside of the routesDirectoryyes right now that's not really supported. surprised to see this actually builds ... so most likely this is not codesplit because of some filter that assumes the file to reside in the routes directory can you please create a github issue for this so track this?
ratty-blushOP•3mo ago
you got it
ratty-blushOP•3mo ago
GitHub
Codesplitting stops working with files that reside outside the rout...
Which project does this relate to? Start Describe the bug This issue only happens with virtual routes (and potentially code based?), specifically when registering route that is NOT contained in the...