TanStackT
TanStack2y ago
7 replies
wispy-olive

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):

- root
  - _public
    - login
  - _auth
    - dashboard
    - (rest of the application)


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!
Was this page helpful?