genetic-orange

How do stop pre-fetch ALL components?

When accessing http://localhost:3000/ and inspecting the network tab in dev tools, there are a lot of requests all the js file For example,

http://localhost:3000/js/components/category/CategoryView.jsx
http://localhost:3000/js/components/cms/banner/routes.ts
...another thousands requests

http://localhost:3000/js/components/category/CategoryView.jsx
http://localhost:3000/js/components/cms/banner/routes.ts
...another thousands requests

It literally pre-fetch all components of the whole project. Is there a way to stop this? Here is the .cta file

{
  "framework": "react",
  "typescript": true,
  "projectName": "myapp",
  "mode": "code-router",
  "tailwind": true,
  "packageManager": "npm",
  "toolchain": "biome",
  "variableValues": {},
  "git": true,
  "version": 1,
  "existingAddOns": []
}

{
  "framework": "react",
  "typescript": true,
  "projectName": "myapp",
  "mode": "code-router",
  "tailwind": true,
  "packageManager": "npm",
  "toolchain": "biome",
  "variableValues": {},
  "git": true,
  "version": 1,
  "existingAddOns": []
}

16 Replies

other-emerald•4mo ago

probably needs autoCodeSplitting:true in the router-plugin config?

genetic-orangeOP•4mo ago

Hmm, things are not that simple. My setup is almost the same as this demo which is code-based routing and it showed the same problem for pre-fetching. To confirm the problem, I apply this patch to the code which simply adds a Dummy page to the app. As long as the component is included by createRoute, it will be fetched. It wasn't even included in the route tree.

diff --git a/src/pages/Dummy.tsx b/src/pages/Dummy.tsx
new file mode 100644
index 0000000..58c5f72
--- /dev/null
+++ b/src/pages/Dummy.tsx
@@ -0,0 +1,3 @@
+export function Dummy() {
+  return null;
+}
diff --git a/src/routes.tsx b/src/routes.tsx
index 5e2f73c..377c39a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -5,6 +5,7 @@ import { Root } from "./components/root";
 import { Dashboard } from "./pages/Dashboard";
 import { Home } from "./pages/Home";
 import { Login } from "./pages/Login";
+import { Dummy } from "./pages/Dummy";
 import { PokemonDetail } from "./pages/PokemonDetail";
 import { Search } from "./pages/Search";
 import { ItemFilters } from "./types/item-filters";
@@ -53,6 +54,12 @@ const searchRoute = createRoute({
   component: Search,
 });
 
+const dummy = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/dummy",
+  component: Dummy,
+});
+
 export const routeTree = rootRoute.addChildren([
   indexRoute,
   dashboardRoute,

diff --git a/src/pages/Dummy.tsx b/src/pages/Dummy.tsx
new file mode 100644
index 0000000..58c5f72
--- /dev/null
+++ b/src/pages/Dummy.tsx
@@ -0,0 +1,3 @@
+export function Dummy() {
+  return null;
+}
diff --git a/src/routes.tsx b/src/routes.tsx
index 5e2f73c..377c39a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -5,6 +5,7 @@ import { Root } from "./components/root";
 import { Dashboard } from "./pages/Dashboard";
 import { Home } from "./pages/Home";
 import { Login } from "./pages/Login";
+import { Dummy } from "./pages/Dummy";
 import { PokemonDetail } from "./pages/PokemonDetail";
 import { Search } from "./pages/Search";
 import { ItemFilters } from "./types/item-filters";
@@ -53,6 +54,12 @@ const searchRoute = createRoute({
   component: Search,
 });
 
+const dummy = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/dummy",
+  component: Dummy,
+});
+
 export const routeTree = rootRoute.addChildren([
   indexRoute,
   dashboardRoute,

As suggested, I tried the automatic code splitting and I realised it only works for file-based routing. Does it mean I HAVE to do it manually like this guide https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#code-based-splitting showed?

other-emerald•4mo ago

yes we cannot possibly automatically split your code based routes this needs conventions, and those are given by file based routing

genetic-orangeOP•4mo ago

Can the files be grouped and fetched in one request, instead of hundreads of small fetches?

other-emerald•4mo ago

which files i think you are looking at the dev server, right? you should run a build and then a preview in case of non-split (either code or file based) you will just see a single bundle being built

genetic-orangeOP•4mo ago

Oh thanks, that make sense. I guess it only bundles the files in production.

other-emerald•4mo ago

yes

genetic-orangeOP•4mo ago

Is there a better example than https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#code-based-splitting ? I am having a hard time translating this to a real probject. What does the import fn take?

[plugin:vite:import-analysis] Failed to resolve import "./pages/Dummy.lazy" from "src/routes.tsx". Does the file exist?
/tmp/tanstack-router-code-based-demo/src/routes.tsx:60:21
50 |    getParentRoute: () => rootRoute,
51 |    path: "/dummy"
52 |  }).lazy(() => import("./pages/Dummy.lazy").then((d) => d.Route));
   |                       ^
53 |  export const routeTree = rootRoute.addChildren(
54 |    [

[plugin:vite:import-analysis] Failed to resolve import "./pages/Dummy.lazy" from "src/routes.tsx". Does the file exist?
/tmp/tanstack-router-code-based-demo/src/routes.tsx:60:21
50 |    getParentRoute: () => rootRoute,
51 |    path: "/dummy"
52 |  }).lazy(() => import("./pages/Dummy.lazy").then((d) => d.Route));
   |                       ^
53 |  export const routeTree = rootRoute.addChildren(
54 |    [

genetic-orangeOP•4mo ago

Here is the diff

message.txt

other-emerald•4mo ago

import is just a regular ESM import

genetic-orangeOP•4mo ago

Given this file structure

src
├── pages
│   ├── Dummy.tsx
├── routes.tsx

src
├── pages
│   ├── Dummy.tsx
├── routes.tsx

// src/pages/Dummy.tsx
import { createLazyRoute } from "@tanstack/react-router";

export const Route = createLazyRoute('/Dummy')({
  component: Dummy,
})

export function Dummy() {
  return null;
}

// src/pages/Dummy.tsx
import { createLazyRoute } from "@tanstack/react-router";

export const Route = createLazyRoute('/Dummy')({
  component: Dummy,
})

export function Dummy() {
  return null;
}

// src/routes.tsx
const dummyRoute = createRoute({
  path: "/dummy",
}).lazy(() => {
  // Does `Dummy.lazy` generated along side with `Dummy.tsx` and located at `src/pages/Dummy.lazy`?
  //      vvvvvvvvvvvvvvvvvv  what path should this be?
  import('./pages/Dummy.lazy'); // can't resolve
  import('./Dummy.lazy');  // can't resolve too
});

// src/routes.tsx
const dummyRoute = createRoute({
  path: "/dummy",
}).lazy(() => {
  // Does `Dummy.lazy` generated along side with `Dummy.tsx` and located at `src/pages/Dummy.lazy`?
  //      vvvvvvvvvvvvvvvvvv  what path should this be?
  import('./pages/Dummy.lazy'); // can't resolve
  import('./Dummy.lazy');  // can't resolve too
});

other-emerald•4mo ago

just import('./pages/Dummy'); its just the path to your file

genetic-orangeOP•4mo ago

Thank you very much, much appreciated! Do you think I could submit a PR to fix the doc https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#code-based-splitting? Is it a mistake?

// src/app.tsx
const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/posts',
}).lazy(() => import('./posts.lazy').then((d) => d.Route))
//                           ^^^^^ it suggested to use `.lazy`

// src/app.tsx
const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/posts',
}).lazy(() => import('./posts.lazy').then((d) => d.Route))
//                           ^^^^^ it suggested to use `.lazy`

other-emerald•4mo ago

not a mistake, this just implies that the file is named posts.lazy.tsx you can name it whatever you like

genetic-orangeOP•4mo ago

but it doesn't match with the code above?

// src/posts.tsx
//     ^^^^^^^^^ there is no `lazy` here
export const Route = createLazyRoute('/posts')({
  component: MyComponent,
})

function MyComponent() {
  return <div>My Component</div>
}

// src/posts.tsx
//     ^^^^^^^^^ there is no `lazy` here
export const Route = createLazyRoute('/posts')({
  component: MyComponent,
})

function MyComponent() {
  return <div>My Component</div>
}

other-emerald•4mo ago

ah right yes so one needs to be changed then // src/posts.tsx should be // src/posts.lazy.tsx

Gaming

Programming

How do stop pre-fetch ALL components?

Did you find this page helpful?