Automatisches Code-Splitting

Die automatische Code-Splitting-Funktion in TanStack Router ermöglicht es Ihnen, die Bundle-Größe Ihrer Anwendung zu optimieren, indem Routenkomponenten und ihre zugehörigen Daten bei Bedarf geladen werden. Dies ist besonders nützlich für große Anwendungen, bei denen Sie die anfängliche Ladezeit minimieren möchten, indem nur der für die aktuelle Route erforderliche Code geladen wird.

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

// 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! Das automatische Code Splitting von TanStack Router ist nicht nur einfach zu aktivieren, sondern bietet auch leistungsstarke Anpassungsoptionen, um zu steuern, wie Ihre Routen in Chunks aufgeteilt werden. So können Sie die Leistung Ihrer Anwendung basierend auf Ihren spezifischen Bedürfnissen und Nutzungsmustern optimieren.

Das automatische Code Splitting von TanStack Router funktioniert, indem es Ihre Routendateien sowohl während der 'Entwicklung' als auch zur 'Build'-Zeit transformiert. Es schreibt die Routendefinitionen um, um Lazy-Loading-Wrapper für Komponenten und Loader zu verwenden, was es dem Bundler ermöglicht, diese Eigenschaften in separate Chunks zu gruppieren.

Wenn Ihre Anwendung also geladen wird, enthält sie 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. Wenn Benutzer durch Ihre Anwendung navigieren, werden zusätzliche Chunks bei Bedarf geladen.

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

Wenn Sie automatisches Code Splitting aktivieren, tut das Bundler-Plugin dies, indem es mittels statischer Code-Analyse den Code in Ihren Routendateien betrachtet, um sie in optimierte Ausgaben zu transformieren.

Dieser Transformationsprozess erzeugt bei der Verarbeitung jeder Ihrer Routendateien zwei wichtige Ausgaben:

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 "on-the-fly" 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 gebündelte 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 Anwendungsleistung. TanStack Router verwendet ein Konzept namens "Split Groupings" (Aufteilungsgruppen), 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 zusammen gebündelt werden sollen. Jede Gruppierung ist eine Liste von Eigenschaftsnamen, die Sie in einem einzigen Lazy-Loaded-Chunk zusammenfassen 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. Daraus ergeben sich:

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

Für die meisten Anwendungen ist das Standardverhalten mit autoCodeSplitting: true ausreichend. TanStack Router bietet jedoch mehrere Optionen, um anzupassen, wie Ihre Routen in Chunks aufgeteilt werden, 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 zusammen gebü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, wodurch Sie eine feingranulare Kontrolle über das Code-Splitting-Verhalten erhalten.

// 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/solid-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/solid-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 einzigen Chunk, der sowohl den loader als auch die component für diese spezifische Route enthält und überschreibt sowohl das Standardverhalten als auch jedes programmatische Split-Verhalten, 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. Pro-Route-Überschreibungen: Die Eigenschaft codeSplitGroupings innerhalb einer Routendatei hat die höchste Priorität. Dies ermöglicht es Ihnen, spezifische Split Groupings für einzelne Routen zu definieren.
2. Programmatisches Split-Verhalten: Die Funktion splitBehavior in Ihrer Bundler-Konfiguration ermöglicht es Ihnen, benutzerdefinierte Logik zu definieren, wie Routen basierend auf ihrer routeId aufgeteilt werden sollen.
3. Standardverhalten: Die Option defaultBehavior in Ihrer Bundler-Konfiguration dient als Fallback für alle Routen, die keine spezifischen Überschreibungen oder definierten benutzerdefinierten Logiken haben. Dies ist die Basiskonfiguration, die für alle Routen gilt, es sei denn, sie wird überschrieben.

Die Funktion loader ist verantwortlich für das Abrufen von Daten, die von der Route benötigt werden. Standardmäßig wird sie in Ihre "Referenzdatei" gebündelt 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 die beste Wahl, den loader nicht abzuspalten und ihn im Hauptbundle zu belassen.