Auto-Split Route Components using TSR Vite Plugin #1315
tannerlinsley
started this conversation in
Ideas
Replies: 1 comment 2 replies
-
To be clear, I need help to accomplish this. So anyone who is well-versed enough in Vite to accomplish this task is invited to take this on! The first person I have reached out to personally about this is @nksaraf. We'll see what he says!) |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
The Challenge
Currently, code-splitting in TSR is conceptually simple. You can either:
component: lazyRouteComponent(() => import('...'))
.lazy.tsx
suffix, which generates the above for you in therouteTree.gen.ts
generated file.While not bad, these options get a bit more tedious when working with larger sites or even migrations. Dissecting every single route file you have into 2 simple to get a better bundle size is annoying and feels like low-hanging fruit for a compiler.
The Solution
The general idea is to use the Vite plugin to automatically split routes into separate chunks during the bundling process.
A typical route might look like this (but may also be implemented with a simple
createRoute
):The main goal of the plugin would be to:
component
property from thecreateFileRoute
function into a new chunkcomponent
property with a call tolazyRouteComponent
and a dynamic import.Future Goals
loader
function into a separate chunk.errorComponent
andpendingComponent
properties into separate chunks.Beta Was this translation helpful? Give feedback.
All reactions