T
TanStack•9h ago
foreign-sapphire

(Lazy) load routes from other chunks at runtime

Heya, I have an application that I've split into several layers (depending on the features available to the user) which I've told Vite to bundle into chunks and then lazy-load them when required (lazy(() => import('./layer-1'))). Because of regulations, I need to keep those chunks separate, what goes on in layer-1 must only be inside layer-1 and not leak out. This includes route data, too. I could lazy load the components but the information about the route/the loaders it uses would still be bundled in the initial bundle if I got it right, which I'm not allowed to do. I've looked into code splitting but it seems like it's more about distributing the route data and less about putting it in different independent bundles. Is it possible to lazy load routes at runtime (e.g. signal based)? It doesn't matter if the routes can't be removed later on, the requirement is just to suppress the initial load. What I would like to do is something like 
createEffect(() => {
  if (hasLayerAccess('layer1'))
    router.addRoutes(lazy(() => import('./layer-1/routes')));
});
createEffect(() => {
  if (hasLayerAccess('layer1'))
    router.addRoutes(lazy(() => import('./layer-1/routes')));
});
It would be nice if static typing works, but I could also live without, because the links between layers are very sparse and could just be a typeless hack if needs be. Currently with solid-router apparently this kind of works with something like <Show when={hasAccess()}>{lazy(() => import...)}</Show>, but I kinda need to migrate away from solid-router.
1 Reply
xenial-black
xenial-black•3h ago
does autoCodeSplitting not solve this for you? https://tanstack.com/router/v1/docs/framework/react/guide/automatic-code-splitting
Automatic Code Splitting | TanStack Router React Docs
The automatic code splitting feature in TanStack Router allows you to optimize your application's bundle size by lazily loading route components and their associated data. This is particularly useful...

Did you find this page helpful?