Automatisches Code-Splitting

Die automatische Code-Aufteilungsfunktion in TanStack Router ermöglicht es Ihnen, die Bundle-Größe Ihrer Anwendung zu optimieren, indem Routenkomponenten und zugehörige Daten lazy geladen werden. Dies ist besonders nützlich für große Anwendungen, bei denen Sie die anfängliche Ladezeit minimieren möchten, indem Sie nur den für die aktuelle Route benötigten Code laden.

Um diese Funktion zu aktivieren, setzen Sie einfach die Option autoCodeSplitting auf true in Ihrer Bundler-Plugin-Konfiguration. Dies ermöglicht es dem Router, die Code-Aufteilung für Ihre Routen automatisch zu handhaben, ohne dass zusätzliche Einrichtung erforderlich ist.

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true, // Enable automatic code splitting
    }),
  ],
})

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true, // Enable automatic code splitting
    }),
  ],
})

Aber das ist erst der Anfang! Die automatische Code-Aufteilung von TanStack Router ist nicht nur einfach zu aktivieren, sondern bietet auch leistungsstarke Anpassungsoptionen, um zu steuern, wie Ihre Routen in Chunks aufgeteilt werden. Dies ermöglicht es Ihnen, die Leistung Ihrer Anwendung entsprechend Ihren spezifischen Anforderungen und Nutzungsmustern zu optimieren.

Die automatische Code-Aufteilung von TanStack Router funktioniert, indem Ihre Routendateien sowohl während der 'Entwicklung' als auch zur 'Build'-Zeit transformiert werden. Sie schreibt die Routendefinitionen neu, um Lazy-Loading-Wrapper für Komponenten und Loader zu verwenden, wodurch der Bundler diese Eigenschaften in separate Chunks gruppieren kann.

Wenn Ihre Anwendung geladen wird, enthält sie also nicht den gesamten Code für jede Route. Stattdessen enthält sie nur den Code für die Routen, die anfänglich benötigt werden. Während Benutzer durch Ihre Anwendung navigieren, werden zusätzliche Chunks bei Bedarf geladen.

Dies geschieht nahtlos, ohne dass Sie Ihren Code manuell aufteilen oder Lazy Loading verwalten müssen. Das TanStack Router Bundler-Plugin kümmert sich um alles und stellt sicher, dass Ihre Routen von Anfang an für eine optimierte Leistung konfiguriert sind.

Wenn Sie automatische Code-Aufteilung aktivieren, tut das Bundler-Plugin dies, indem es statische Code-Analyse verwendet, um den Code in Ihren Routendateien zu betrachten und ihn in optimierte Ausgaben zu transformieren.

Dieser Transformationsprozess liefert zwei Schlüssel-Ausgaben, wenn jede Ihrer Routendateien verarbeitet wird:

1. Referenzdatei: Das Bundler-Plugin nimmt Ihre ursprüngliche Routendatei (z. B. posts.route.tsx) und modifiziert die Werte für Eigenschaften wie component oder pendingComponent, um spezielle Lazy-Loading-Wrapper zu verwenden, die den tatsächlichen Code später abrufen. Diese Wrapper verweisen auf eine "virtuelle" Datei, die der Bundler später auflösen wird.
2. Virtuelle Datei: Wenn der Bundler eine Anfrage für eine dieser virtuellen Dateien sieht (z. B. posts.route.tsx?tsr-split=component), fängt er sie ab, um eine neue, minimale Datei im laufenden Betrieb zu generieren, die *nur* den Code für die angeforderten Eigenschaften enthält (z. B. nur die PostsComponent).

Dieser Prozess stellt sicher, dass Ihr ursprünglicher Code sauber und lesbar bleibt, während die tatsächliche gebundelte Ausgabe für die anfängliche Bundle-Größe optimiert ist.

Die Entscheidung, was in separate Chunks aufgeteilt wird, ist entscheidend für die Optimierung der Leistung Ihrer Anwendung. TanStack Router verwendet ein Konzept namens "Split Groupings", um zu bestimmen, wie verschiedene Teile Ihrer Route zusammen gebündelt werden sollen.

Split Groupings sind Arrays von Eigenschaften, die TanStack Router mitteilen, wie verschiedene Teile Ihrer Route zusammengebündelt werden sollen. Jede Gruppierung ist eine Liste von Eigenschaftsnamen, die Sie in einem einzigen Lazy-Loaded-Chunk zusammenbündeln möchten.

Die verfügbaren Eigenschaften zum Aufteilen sind

• component
• errorComponent
• pendingComponent
• notFoundComponent
• loader

Standardmäßig verwendet TanStack Router die folgenden Split Groupings

[
  ['component'],
  ['errorComponent'],
  ['notFoundComponent']
]

[
  ['component'],
  ['errorComponent'],
  ['notFoundComponent']
]

Das bedeutet, dass für jede Route drei separate Lazy-Loaded-Chunks erstellt werden. Mit dem Ergebnis

• Einer für die Hauptkomponente
• Einer für die Fehlerkomponente
• Und einer für die Komponente "nicht gefunden".

Für die meisten Anwendungen ist das Standardverhalten mit autoCodeSplitting: true ausreichend. TanStack Router bietet jedoch mehrere Optionen zur Anpassung der Aufteilung Ihrer Routen in Chunks, damit Sie für spezifische Anwendungsfälle oder Leistungsanforderungen optimieren können.

Sie können ändern, wie TanStack Router Ihre Routen aufteilt, indem Sie die Option defaultBehavior in Ihrer Bundler-Plugin-Konfiguration ändern. Dies ermöglicht es Ihnen zu definieren, wie verschiedene Eigenschaften Ihrer Routen zusammengebündelt werden sollen.

Um beispielsweise alle UI-bezogenen Komponenten in einem einzigen Chunk zu bündeln, könnten Sie es wie folgt konfigurieren:

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        defaultBehavior: [
          [
            'component',
            'pendingComponent',
            'errorComponent',
            'notFoundComponent',
          ], // Bundle all UI components together
        ],
      },
    }),
  ],
})

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        defaultBehavior: [
          [
            'component',
            'pendingComponent',
            'errorComponent',
            'notFoundComponent',
          ], // Bundle all UI components together
        ],
      },
    }),
  ],
})

Für komplexe Regelwerke können Sie die Funktion splitBehavior in Ihrer Vite-Konfiguration verwenden, um programmatisch zu definieren, wie Routen basierend auf ihrer routeId in Chunks aufgeteilt werden sollen. Diese Funktion ermöglicht es Ihnen, benutzerdefinierte Logik für die Gruppierung von Eigenschaften zu implementieren und Ihnen eine feingranulare Kontrolle über das Code-Aufteilungsverhalten zu geben.

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        splitBehavior: ({ routeId }) => {
          // For all routes under /posts, bundle the loader and component together
          if (routeId.startsWith('/posts')) {
            return [['loader', 'component']]
          }
          // All other routes will use the `defaultBehavior`
        },
      },
    }),
  ],
})

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        splitBehavior: ({ routeId }) => {
          // For all routes under /posts, bundle the loader and component together
          if (routeId.startsWith('/posts')) {
            return [['loader', 'component']]
          }
          // All other routes will use the `defaultBehavior`
        },
      },
    }),
  ],
})

Für ultimative Kontrolle können Sie die globale Konfiguration direkt innerhalb einer Routendatei überschreiben, indem Sie eine Eigenschaft codeSplitGroupings hinzufügen. Dies ist nützlich für Routen mit einzigartigen Optimierungsanforderungen.

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

export const Route = createFileRoute('/posts')({
  // For this specific route, bundle the loader and component together.
  codeSplitGroupings: [['loader', 'component']],
  loader: () => loadPostsData(),
  component: PostsComponent,
})

function PostsComponent() {
  // ...
}

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

export const Route = createFileRoute('/posts')({
  // For this specific route, bundle the loader and component together.
  codeSplitGroupings: [['loader', 'component']],
  loader: () => loadPostsData(),
  component: PostsComponent,
})

function PostsComponent() {
  // ...
}

Dies erstellt einen einzelnen Chunk, der sowohl den loader als auch die component für diese spezielle Route enthält und sowohl das Standardverhalten als auch jedes programmatische Split-Verhalten überschreibt, das in Ihrer Bundler-Konfiguration definiert ist.

Diese Anleitung hat bisher drei verschiedene Möglichkeiten beschrieben, wie TanStack Router Ihre Routen in Chunks aufteilt.

Um sicherzustellen, dass die verschiedenen Konfigurationen nicht miteinander kollidieren, verwendet TanStack Router die folgende Reihenfolge der Priorität:

1. Überschreibungen pro Route: Die Eigenschaft codeSplitGroupings innerhalb einer Routendatei hat die höchste Priorität. Dies ermöglicht es Ihnen, spezifische Split-Gruppierungen für einzelne Routen zu definieren.
2. Programmatisches Split-Verhalten: Die Funktion splitBehavior in Ihrer Bundler-Konfiguration ermöglicht es Ihnen, benutzerdefinierte Logik für die Aufteilung von Routen basierend auf ihrer routeId zu definieren.
3. Standardverhalten: Die Option defaultBehavior in Ihrer Bundler-Konfiguration dient als Fallback für alle Routen, für die keine spezifischen Überschreibungen oder benutzerdefinierte Logik definiert sind. Dies ist die Basiskonfiguration, die für alle Routen gilt, es sei denn, sie wird überschrieben.

Die loader-Funktion ist dafür verantwortlich, Daten abzurufen, die von der Route benötigt werden. Standardmäßig wird sie in Ihre "Referenzdatei" eingebunden und im anfänglichen Bundle geladen. Sie können den loader jedoch auch in einen eigenen Chunk aufteilen, wenn Sie weiter optimieren möchten.

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        defaultBehavior: [
          ['loader'], // The loader will be in its own chunk
          ['component'],
          // ... other component groupings
        ],
      },
    }),
  ],
})

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

export default defineConfig({
  plugins: [
    tanstackRouter({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        defaultBehavior: [
          ['loader'], // The loader will be in its own chunk
          ['component'],
          // ... other component groupings
        ],
      },
    }),
  ],
})

Wir raten dringend davon ab, den loader aufzuteilen, es sei denn, Sie haben einen spezifischen Anwendungsfall, der dies erfordert. In den meisten Fällen ist es für die Leistung am besten, den loader nicht abzuspalten und ihn im Hauptbundle zu belassen.