rare-sapphire

Automatic Code Splitting

Hello, i would like to know if automatic code splitting works only with files named route.tsx or it's available for all routable file in our routes directory.

Encapsulating a route's files into a directory
Since TanStack Router's file-based routing system is designed to support both flat and nested file structures, it's possible to encapsulate a route's files into a single directory without any additional configuration.

To encapsulate a route's files into a directory, move the route file itself into a .route file within a directory with the same name as the route file.

For example, if you have a route file named posts.tsx, you would create a new directory named posts and move the posts.tsx file into that directory, renaming it to route.tsx.

Before

posts.tsx
After

posts
route.tsx

Encapsulating a route's files into a directory
Since TanStack Router's file-based routing system is designed to support both flat and nested file structures, it's possible to encapsulate a route's files into a single directory without any additional configuration.

To encapsulate a route's files into a directory, move the route file itself into a .route file within a directory with the same name as the route file.

For example, if you have a route file named posts.tsx, you would create a new directory named posts and move the posts.tsx file into that directory, renaming it to route.tsx.

Before

posts.tsx
After

posts
route.tsx

this part confused me a little on the doc. I would like to know if posts/$postId.tsx benefit automatic code spliting. Thanks a lot !

8 Replies

foreign-sapphire•8mo ago

All routes are code-split automatically

rare-sapphireOP•8mo ago

Thanks ! they is a way to check that in dev tool ?

foreign-sapphire•8mo ago

doubt, but you can run a build and analyze the bundles

rare-sapphireOP•8mo ago

okay thanks a lot, really

foreign-sapphire•8mo ago

also, route.tsx is just a way of exposing a route on a path. The different between route.tsx and index.tsx is that route.tsx will allow nesting, aka it will be the layout of a child route. index.tsx will always be a leaf route. All other files, for example if you have some-route.tsx it will work like some-route/route.tsx by default so, for example

some-route.tsx
some-route.something-else.tsx

// and
some-route/
  route.tsx
  something-else.tsx

some-route.tsx
some-route.something-else.tsx

// and
some-route/
  route.tsx
  something-else.tsx

will generate 2 paths /some-route and /some-route/something-else. If you go to /some-route/something-else the components for both some-route.tsx and some-route.something-else.tsx will both be visible (if you have an <Outlet /> in some-route.tsx)

rare-sapphireOP•8mo ago

ohhh that's why my pathless routing didn't works and when i renamed it to route.tsx and put the outlet inside everything worked perfectly

foreign-sapphire•8mo ago

if you have no outlet, both will only render the component of some-route.tsx even though both routes match on the /some-route/something-else path if you want them as separate non-nesting routes, you do some-route.index.tsx or some-route/index.tsx These behaviours are what was hard for me to understand when I started using tanstack router too, hence why I always mention them when answering questions about route.tsx/index.tsx to others

rare-sapphireOP•8mo ago

yeah it's a little confusing i understand know thank you man

Gaming

Programming

Automatic Code Splitting

Did you find this page helpful?