Auto code splitting - does component need to be defined in route file?

Hello! I need clarification on the automatic code splitting feature.

Current Pattern:

// Separate file
const CurrencyPage = () => { /* component logic */ }
export default CurrencyPage;

// Route file
import CurrencyPage from "@/features/app/settings/currency";
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage, // Imported from another file
});

// Separate file
const CurrencyPage = () => { /* component logic */ }
export default CurrencyPage;

// Route file
import CurrencyPage from "@/features/app/settings/currency";
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage, // Imported from another file
});

The Docs Say:

"Route properties like component, loader, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split."

Example from docs:

// ❌ Do NOT do this!
export function PostsNotFoundComponent() { ... }

// ✅ Correct  
function PostsNotFoundComponent() { ... }

// ❌ Do NOT do this!
export function PostsNotFoundComponent() { ... }

// ✅ Correct  
function PostsNotFoundComponent() { ... }

Question:
Does this mean the component MUST be defined in the route file (not imported) for auto code splitting to work?

Should I refactor to this instead?

export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage,
});

// Component in same file (not exported)
function CurrencyPage() {
  // all component logic here
}

export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage,
});

// Component in same file (not exported)
function CurrencyPage() {
  // all component logic here
}

If yes, is this the recommended approach even for large pages? Or is there a better pattern to maintain separation while keeping auto code splitting?

Thanks!

TanStack•6mo ago•

2 replies

verbal-lime

Auto code splitting - does component need to be defined in route file?

Hello! I need clarification on the automatic code splitting feature.

Current Pattern:

// Separate file
const CurrencyPage = () => { /* component logic */ }
export default CurrencyPage;

// Route file
import CurrencyPage from "@/features/app/settings/currency";
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage, // Imported from another file
});

// Separate file
const CurrencyPage = () => { /* component logic */ }
export default CurrencyPage;

// Route file
import CurrencyPage from "@/features/app/settings/currency";
export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage, // Imported from another file
});

The Docs Say:

"Route properties like component, loader, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split."

Example from docs:

// ❌ Do NOT do this!
export function PostsNotFoundComponent() { ... }

// ✅ Correct  
function PostsNotFoundComponent() { ... }

// ❌ Do NOT do this!
export function PostsNotFoundComponent() { ... }

// ✅ Correct  
function PostsNotFoundComponent() { ... }

Question:
Does this mean the component MUST be defined in the route file (not imported) for auto code splitting to work?

Should I refactor to this instead?

export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage,
});

// Component in same file (not exported)
function CurrencyPage() {
  // all component logic here
}

export const Route = createFileRoute("/_app/settings/currency/")({
  component: CurrencyPage,
});

// Component in same file (not exported)
function CurrencyPage() {
  // all component logic here
}

If yes, is this the recommended approach even for large pages? Or is there a better pattern to maintain separation while keeping auto code splitting?

Thanks!

Auto code splitting - does component need to be defined in route file?

Similar Threads

Auto code splitting - does component need to be defined in route file?

Similar Threads

Similar Threads

Similar Threads