Optimizing build/bundle size for specific pages
Hey, I'm new to TanStack router so I have a few questions about making a good build for a webapp. I'm using Vite/React/TanStack Router to create a webapp with authentication, and I want to make sure the login page loads as fast as possible and has a small bundle size.
Currently my routes look like this (all routes in the
_auth directory are for when the user is logged in, all the routes in the _public directory are for when he is not):
I want to ensure that when users are reaching the login page that the build I make for this webapp serves a small bundle to load as fast as possible. Since I'm new to this router, my initial thought was to make a build with 2 entrypoints (one specifically for the login page and one for the rest of the application), and then configure my nginx to serve each .html entrypoint depending on the route. However this would kinda defeat the purpose of using the tanstack router, at least for the login page.
So is there any way to achieve a similar behavior using features of the router? I'm trying to understand how the "Code splitting" and .lazy.tsx section of the docs work, and if they would be enough for what I want, but I wanted to check with people that have more experience than me with this to figure out what I should be doing.
Thanks in advance!4 Replies
xenial-black•13mo ago
yes code splitting would help
we will soon move automatic code splitting out of experimental phase
then it's simply a single config setting to turn on code splitting
ambitious-aquaOP•13mo ago
So right now, without using the experimental automatic code splitting, if I do something like spliting my
login.tsx into a login.tsx and a login.lazy.tsx, where the component is in the .lazy.tsx file, that should be enough so my login page only loads that component and not the whole application?
And does this also separate the bundle when building? Or do I need to take extra steps for that?xenial-black•13mo ago
And does this also separate the bundle when building? Or do I need to take extra steps for that?yes
So right now, without using the experimental automatic code splitting, if I do something like spliting my login.tsx into a login.tsx and a login.lazy.tsx, where the component is in the .lazy.tsx file, that should be enough so my login page only loads that component and not the whole application?yes
ambitious-aquaOP•13mo ago
Perfect! Gonna try it out then, thanks for the quick responses!