Code-Splitting

Code-Aufteilung und Lazy Loading sind leistungsstarke Techniken zur Verbesserung der Bundle-Größe und der Ladeleistung einer Anwendung.

• Reduziert die Menge an Code, die beim anfänglichen Seitenaufruf geladen werden muss
• Code wird bei Bedarf geladen, wenn er benötigt wird
• Führt zu kleineren Chunks, die vom Browser leichter gecached werden können.

TanStack Router trennt Code in zwei Kategorien

• Kritische Routenkonfiguration – Der Code, der zum Rendern der aktuellen Route und zum möglichst frühen Starten des Datenlade-Prozesses erforderlich ist.

  • Pfad-Parsing/Serialisierung
  • Validierung von Suchparametern
  • Loader, Before Load
  • Routenkontext
  • Statische Daten
  • Links
  • Skripte
  • Stile
  • Alle anderen Routenkonfigurationen, die unten nicht aufgeführt sind

• Nicht-kritische/Lazy Routenkonfiguration – Der Code, der nicht für das Abgleichen der Route erforderlich ist und bei Bedarf geladen werden kann.

  • Routenkomponente
  • Fehlerkomponente
  • Wartekomponente
  • Nicht gefunden-Komponente

🧠 Warum wird der Loader nicht aufgeteilt?

• Der Loader ist bereits eine asynchrone Grenze, daher zahlen Sie doppelt, um sowohl den Chunk zu erhalten als auch auf die Ausführung des Loaders zu warten.

• Kategorisch trägt er weniger zur großen Bundle-Größe bei als eine Komponente.

• Der Loader ist eines der wichtigsten vorab ladbaren Assets für eine Route, insbesondere wenn Sie eine Standard-Vorablade-Absicht verwenden, wie z. B. das Überfahren eines Links mit der Maus. Daher ist es wichtig, dass der Loader ohne zusätzlichen asynchronen Overhead verfügbar ist.

  Wenn Sie die Nachteile der Aufteilung des Loaders kennen und dennoch fortfahren möchten, gehen Sie zum Abschnitt Daten-Loader-Aufteilung.

Da das dateibasierte Routing-System von TanStack Router sowohl flache als auch verschachtelte Dateistrukturen unterstützt, ist es möglich, die Dateien einer Route ohne zusätzliche Konfiguration in einem einzigen Verzeichnis zu kapseln.

Um die Dateien einer Route in einem Verzeichnis zu kapseln, verschieben Sie die Routendatei selbst in eine .route-Datei in einem Verzeichnis mit demselben Namen wie die Routendatei.

Wenn Sie beispielsweise eine Routendatei namens posts.tsx haben, erstellen Sie ein neues Verzeichnis namens posts und verschieben Sie die posts.tsx-Datei in dieses Verzeichnis und benennen Sie sie in route.tsx um.

Vorher

• posts.tsx

Nachher

• posts
  • route.tsx

TanStack Router unterstützt mehrere Ansätze zur Code-Aufteilung. Wenn Sie Code-basiertes Routing verwenden, überspringen Sie den Abschnitt Code-basierte Aufteilung.

Wenn Sie dateibasiertes Routing verwenden, können Sie die folgenden Ansätze zur Code-Aufteilung nutzen

• Automatische Code-Aufteilung nutzen ✨
• Das Suffix .lazy.tsx verwenden
• Virtuelle Routen verwenden

Dies ist die einfachste und leistungsfähigste Methode, Ihre Routendateien aufzuteilen.

Bei Verwendung des Features autoCodeSplitting teilt TanStack Router Ihre Routendateien automatisch basierend auf der oben genannten nicht-kritischen Routenkonfiguration auf.

Um die automatische Code-Aufteilung zu aktivieren, müssen Sie lediglich Folgendes zur Konfiguration Ihres TanStack Router Bundler Plugins hinzufügen

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    tanstackRouter({
      // ...
      autoCodeSplitting: true,
    }),
    react(), // Make sure to add this plugin after the TanStack Router Bundler plugin
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    tanstackRouter({
      // ...
      autoCodeSplitting: true,
    }),
    react(), // Make sure to add this plugin after the TanStack Router Bundler plugin
  ],
})

Das war's! TanStack Router wird automatisch alle Ihre Routendateien nach ihren kritischen und nicht-kritischen Routenkonfigurationen aufteilen.

Wenn Sie mehr Kontrolle über den Code-Aufteilungs-Prozess wünschen, gehen Sie zur Anleitung Automatische Code-Aufteilung, um mehr über die verfügbaren Optionen zu erfahren.

Wenn Sie die automatische Code-Aufteilung nicht nutzen können, können Sie Ihre Routendateien trotzdem mit dem Suffix .lazy.tsx aufteilen. Es ist so einfach wie das Verschieben Ihres Codes in eine separate Datei mit einem .lazy.tsx Suffix und die Verwendung der Funktion createLazyFileRoute anstelle von createFileRoute.

Dies sind die einzigen Optionen, die createLazyFileRoute unterstützt

Wenn Sie .lazy.tsx verwenden, können Sie Ihre Route in zwei Dateien aufteilen, um Code-Aufteilung zu ermöglichen

Vorher (Einzelne Datei)

// src/routes/posts.tsx
import { createFileRoute } from '@tanstack/react-router'
import { fetchPosts } from './api'

export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
  component: Posts,
})

function Posts() {
  // ...
}

// src/routes/posts.tsx
import { createFileRoute } from '@tanstack/react-router'
import { fetchPosts } from './api'

export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
  component: Posts,
})

function Posts() {
  // ...
}

Nachher (Auf zwei Dateien aufgeteilt)

Diese Datei würde die kritische Routenkonfiguration enthalten

// src/routes/posts.tsx

import { createFileRoute } from '@tanstack/react-router'
import { fetchPosts } from './api'

export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
})

// src/routes/posts.tsx

import { createFileRoute } from '@tanstack/react-router'
import { fetchPosts } from './api'

export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
})

Während die nicht-kritische Routenkonfiguration in die Datei mit dem Suffix .lazy.tsx kommt

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
})

function Posts() {
  // ...
}

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
})

function Posts() {
  // ...
}

Sie könnten in die Situation geraten, dass Sie alles aus einer Routendatei auslagern und sie leer lassen! In diesem Fall, löschen Sie die Routendatei einfach vollständig! Eine virtuelle Route wird automatisch für Sie generiert und dient als Anker für Ihre ausgelagerten Dateien. Diese virtuelle Route wird direkt in der generierten Routenbaumdatei leben.

Vorher (Virtuelle Routen)

// src/routes/posts.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  // Hello?
})

// src/routes/posts.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  // Hello?
})

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
})

function Posts() {
  // ...
}

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
})

function Posts() {
  // ...
}

Nachher (Virtuelle Routen)

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
})

function Posts() {
  // ...
}

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
})

function Posts() {
  // ...
}

Tada! 🎉

Wenn Sie Code-basiertes Routing verwenden, können Sie Ihre Routen immer noch mit der Methode Route.lazy() und der Funktion createLazyRoute aufteilen. Sie müssen Ihre Routenkonfiguration in zwei Teile aufteilen

Erstellen Sie eine Lazy-Route mit der Funktion createLazyRoute.

// src/posts.lazy.tsx
export const Route = createLazyRoute('/posts')({
  component: MyComponent,
})

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

// src/posts.lazy.tsx
export const Route = createLazyRoute('/posts')({
  component: MyComponent,
})

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

Rufen Sie dann die Methode .lazy auf der Routendefinition in Ihrer app.tsx auf, um die Lazy/Code-Splitting-Route mit der nicht-kritischen Routenkonfiguration zu importieren.

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

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

Seien Sie gewarnt!!! Das Aufteilen eines Routen-Loaders ist ein gefährliches Spiel.

Es kann ein mächtiges Werkzeug zur Reduzierung der Bundle-Größe sein, hat aber, wie im Abschnitt Wie teilt TanStack Router Code auf? erwähnt, seinen Preis.

Sie können Ihre Datenlade-Logik mit der Option loader der Route aufteilen. Obwohl dieser Prozess die Typsicherheit mit den an Ihren Loader übergebenen Parametern erschwert, können Sie immer den generischen Typ LoaderContext verwenden, um den Großteil der Arbeit zu erledigen

import { lazyFn } from '@tanstack/react-router'

const route = createRoute({
  path: '/my-route',
  component: MyComponent,
  loader: lazyFn(() => import('./loader'), 'loader'),
})

// In another file...a
export const loader = async (context: LoaderContext) => {
  /// ...
}

import { lazyFn } from '@tanstack/react-router'

const route = createRoute({
  path: '/my-route',
  component: MyComponent,
  loader: lazyFn(() => import('./loader'), 'loader'),
})

// In another file...a
export const loader = async (context: LoaderContext) => {
  /// ...
}

Wenn Sie dateibasiertes Routing verwenden, können Sie Ihren loader nur dann aufteilen, wenn Sie Automatische Code-Aufteilung mit benutzerdefinierten Bundler-Optionen verwenden.

Wie Sie sich vielleicht denken können, kann das Platzieren Ihres Komponenten-Codes in einer separaten Datei von Ihrer Route es schwierig machen, die Route selbst zu verwenden. Um dabei zu helfen, exportiert TanStack Router eine praktische Funktion getRouteApi, die Sie verwenden können, um typsichere APIs einer Route in einer Datei abzurufen, ohne die Route selbst zu importieren.

• my-route.tsx

import { createRoute } from '@tanstack/react-router'
import { MyComponent } from './MyComponent'

const route = createRoute({
  path: '/my-route',
  loader: () => ({
    foo: 'bar',
  }),
  component: MyComponent,
})

import { createRoute } from '@tanstack/react-router'
import { MyComponent } from './MyComponent'

const route = createRoute({
  path: '/my-route',
  loader: () => ({
    foo: 'bar',
  }),
  component: MyComponent,
})

• MyComponent.tsx

import { getRouteApi } from '@tanstack/react-router'

const route = getRouteApi('/my-route')

export function MyComponent() {
  const loaderData = route.useLoaderData()
  //    ^? { foo: string }

  return <div>...</div>
}

import { getRouteApi } from '@tanstack/react-router'

const route = getRouteApi('/my-route')

export function MyComponent() {
  const loaderData = route.useLoaderData()
  //    ^? { foo: string }

  return <div>...</div>
}

Die Funktion getRouteApi ist nützlich, um andere typsichere APIs abzurufen

• useLoaderData
• useLoaderDeps
• useMatch
• useParams
• useRouteContext
• useSearch