'TanStack Router Preloading: Wie wir den LCP mit intelligentem Prefetching um 40% gesenkt haben'

TL;DR: TanStack Router unterstützt automatisches Code-Splitting pro Route und mehrere Preloading-Strategien: Hover-basiert, Viewport-basiert und programmatisch. Dieser Leitfaden behandelt das Lazy Loading von Routenkomponenten, das Preloading beim Überfahren von Links, das Cache-Management für vorgeladene Routen und die Messung der Preloading-Effektivität.

Einführung

Mit dem Wachstum Ihrer SaaS-Anwendung wächst auch Ihr JavaScript-Bundle. Ein naiver Ansatz lädt alle Routen im Voraus, was die anfängliche Ladezeit der Seite verlangsamt. TanStack Router unterstützt automatisches Code-Splitting: Der Komponenten- und Loader-Code jeder Route ist ein separater Chunk, der nur geladen wird, wenn er benötigt wird.

In Kombination mit Preloading können Sie beginnen, den Code und die Daten einer Route zu laden, bevor der Benutzer klickt, wodurch sich die Navigation sofort anfühlt.

Code-Splitting mit Lazy Loading

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

export const Route = createFileRoute('/dashboard')({
  component: lazyRouteComponent(() => import('./dashboard.component')),
  loader: () => import('./dashboard.loader').then(m => m.loadDashboardData),
})

Jede Routendatei wird zu einem separaten Chunk in Ihrer Build-Ausgabe. TanStack Router kümmert sich automatisch um den Ladezustand.

Hover-basiertes Preloading

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

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  const router = useRouter()

  return (
    <Link
      to={to}
      onMouseEnter={() => router.preloadRoute({ to })}
      onTouchStart={() => router.preloadRoute({ to })}
    >
      {children}
    </Link>
  )
}

Preloading-Strategien

Messung der Preloading-Effektivität

Verfolgen Sie, wie oft vorgeladene Routen tatsächlich besucht werden:

router.subscribe('onResolved', (event) => {
  if (event.wasPreloaded) {
    analytics.track('navigation_preloaded', { to: event.to })
  }
})

Fazit

Routen-Preloading und Code-Splitting im TanStack Router bieten Ihnen schnelle anfängliche Ladezeiten und eine sofortige Navigation. Die Hover-basierte Preloading-Strategie bietet das beste Gleichgewicht zwischen Leistungssteigerung und Bandbreitenkosten.

Für weitere Routing-Muster lesen Sie TanStack Router Advanced Patterns. Kombinieren Sie Code-Splitting mit JavaScript Bundle Splitting Patterns für eine feinere Chunk-Kontrolle. Messen Sie Ihre Verbesserungen anhand des Core Web Vitals Optimization Guide und nutzen Sie Performance Budgeting for SaaS, um Leistungseinbußen zu vermeiden.