Wie man die richtige Svelte i18n-Bibliothek auswählt

Svelte liefert von Haus aus nichts für i18n mit. Kein $t, keine Locale-Primitive, kein Nachrichtenformat. Jede Option ist eine Drittanbieter-Lösung, und das Svelte-Ökosystem ist der Ort, an dem Compile-Time-i18n am weitesten vorangetrieben wurde. Daher unterscheiden sich die Kandidaten stärker voneinander als in React oder Vue.

Dieser Leitfaden listet die Fragen auf, die Sie zuerst beantworten sollten, und ordnet die Antworten anschließend svelte-i18n, Paraglide, typesafe-i18n, wuchale und Intlayer zu, sowohl für Vite + Svelte als auch für SvelteKit.

Inhaltsverzeichnis

Sechs Fragen vor dem Vergleich von Bibliotheken

1. Vite SPA oder SvelteKit? In einer SPA ist ein Store auf Modulebene korrekt: ein Tab, ein Benutzer, eine Locale. Unter SvelteKit wird dasselbe Singleton über gleichzeitige Anfragen auf dem Server geteilt, und Anfrage B rendert in der Sprache von Anfrage A. Die Bibliothek bietet Ihnen entweder ein Per-Request-Modell (Context, locals) oder überlässt dies Ihnen.
2. Wer schreibt die Übersetzungen? Entwickler, ein TMS, eine Agentur, die ICU-Strings liefert, oder eine KI-Pipeline. svelte-i18n versteht ICU. Paraglide und typesafe-i18n nutzen eine eigene Syntax. Passen Sie die Wahl an Ihre Übersetzungsquelle an.
3. Wie viele Sprachen und Seiten? Zwei Sprachen und fünf Seiten können alles auf einmal ausliefern. Zehn Sprachen und vierzig Routen können das nicht, und der Unterschied zwischen Runtime-Katalogen und kompilierten Nachrichten wird zum Hauptkostenfaktor.
4. Benötigen Sie Typen für Schlüssel? $_("cart.totl") ist ein Laufzeitfehler in svelte-i18n. Compile-Time-Bibliotheken machen daraus konstruktionsbedingt einen Typfehler.
5. Svelte 4 Stores oder Svelte 5 Runes? Runes ändern die Syntax des Locale-State, nicht das Problem des geteilten Zustands. Aber $state in einer .ts-Datei kompiliert zu einer einfachen Variable, sodass die Runtime der Bibliothek Rune-kompatibel sein muss, wenn Sie Svelte 5 nutzen.
6. Können Sie mit generierten Dateien im Repo leben? Paraglide und typesafe-i18n generieren beide JavaScript oder TypeScript in Ihren Quellbaum. Einige Teams stört das nicht, andere erhalten Merge-Konflikte bei jedem parallelen Branch.

Schreiben Sie die Antworten auf. Alles Folgende bezieht sich darauf.

Die Landschaft auf einen Blick

Svelte i18n entstand später als Lösungen für React oder Vue und übersprang die ersten Entwicklungsstufen direkt hin zu Compile-Time-Ansätzen.

Die Geschichte von JavaScript i18n behandelt jede Welle im Detail.

Die wichtigste Entscheidung: Wo Inhalte liegen und wann sie laden

Zwei strukturelle Entscheidungen erklären den Großteil der Bundle-Unterschiede zwischen den Setups:

• Zentralisierter oder abgegrenzter (scoped) Inhalt. Eine locales/en.json für die gesamte App oder eine Deklaration pro Komponente.
• Statischer oder dynamischer Import. Alles beim Start geladen oder die aktive Locale (und idealerweise die aktive Route) bei Bedarf nachgeladen.

Die Grafik schätzt den Payload für eine theoretische App von 1 bis 10 Seiten, übersetzt in 1 bis 10 Sprachen, mit etwa 30 KB Text pro Seite.

svelte-i18n liegt standardmäßig oben links: register("fr", () => import("./fr.json")) ermöglicht dynamisches Laden pro Locale, aber ein Locale-Katalog ist ein einzelnes Objekt und sein Laden lädt die Texte jeder Seite. Paraglide ist der interessante Fall: Weil jede Nachricht ein eigener Export ist, liefert Tree-Shaking die Seiten-Achse automatisch mit, und der Svelte-Benchmark bestätigt, dass dies unter Vite + Svelte wie beworben funktioniert (in den React- und Next.js-Benchmarks war dies nicht der Fall). Intlayer erreicht dieselbe Ecke durch deklarative Inhalte pro Komponente.

Wenn Ihre Antwort auf Frage 3 "viele Seiten" war, gewichten Sie diesen Abschnitt höher als jede API-Präferenz. Der Beitrag Per-Komponente vs. Zentralisiertes i18n behandelt die Wartungsseite desselben Kompromisses.

Die Kandidaten

Die Bibliotheksgrößen stammen aus dem Svelte-Benchmark: Store plus Accessor in einer leeren Komponente nach Bundling, Tree-Shaking und Minifizierung bei einer App mit 10 Seiten und 10 Sprachen. Der Inhalt wird separat gemessen.

Die Zahlen sind eine Momentaufnahme der Benchmark-Versionen. Führen Sie den Benchmark für Ihre eigene Anwendung aus, bevor Sie sich allein aufgrund der Größe entscheiden.

Paraglides Bibliotheksgröße von nahezu null ist konstruktionsbedingt: Die Runtime wird direkt in Ihr Repository generiert. Intlayer benötigt vite-intlayer, weshalb es nicht ohne Build-Schritt ausgeführt werden kann.

Ordnen Sie Ihre Antworten einer Bibliothek zu

Wo die Schwachstellen der einzelnen Bibliotheken liegen

• svelte-i18n: schwerstes Paket der Auswahl, keine Schlüssel-Typen, kein Per-Route-Splitting, Store auf Modulebene, der unter SvelteKit über Anfragen hinweg Daten leakt, sofern Sie Context nicht selbst anbinden.
• typesafe-i18n: ein Watcher-Prozess, generierte Dateien im Repo und ein Repository, das in letzter Zeit wenig Aktivität zeigt.
• Paraglide: generierte Dateien im Repo, die vor jedem Push neu generiert werden müssen, Merge-Konflikte auf parallelen Branches, und die Locale wird bei jedem Nachrichtenaufruf aus Cookie oder Storage statt aus einem Store gelesen, was bei einem Sprachwechsel Mehraufwand bedeutet.
• wuchale: interessanter Extraktionsansatz, aber noch in einem frühen Stadium. Der React-Benchmark stieß auf Reaktivitätsprobleme, die erzwungene Provider-Re-Renders erforderten, und die Dokumentation ist knapp.
• Intlayer: verpflichtendes Build-Plugin, kleineres Ökosystem, partielle ICU-Unterstützung und Inhalte, die per Design über die Codebase verteilt sind, sodass der Export einer einzelnen JSON-Datei für Übersetzer zusätzliches Tooling erfordert.

Wie die Optionen im Code aussehen

Die gleiche Komponente, eine Warenkorb-Zusammenfassung mit Titel und Pluralform, umgesetzt mit jedem Kandidaten. Der interessante Teil ist nicht das Markup, sondern wo der Inhalt liegt, wie die Locale gespeichert wird und was die Typprüfung weiß.

{
  "cart": {
    "title": "Your cart",
    "items": "{count, plural, one {# item} other {# items}}"
  }
}

<script lang="ts">
  import { _ } from "svelte-i18n";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$_("cart.title")}</h2>
  <p>{$_("cart.items", { values: { count } })}</p>
</section>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script lang="ts">
  import { m } from "$lib/paraglide/messages.js";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{m.cart_title()}</h2>
  <p>{m.cart_items({ count })}</p>
</section>

import type { BaseTranslation } from "../i18n-types";

const en = {
  cart: {
    title: "Your cart",
    items: "{count} item{{s}}",
  },
} satisfies BaseTranslation;

export default en;

<script lang="ts">
  import LL from "$i18n/i18n-svelte";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$LL.cart.title()}</h2>
  <p>{$LL.cart.items({ count })}</p>
</section>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({
      de: "Ihr Warenkorb",
      en: "Your cart",
      fr: "Votre panier",
      es: "Tu carrito",
    }),
    items: t({
      de: plural({ one: "{{count}} Artikel", other: "{{count}} Artikel" }),
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script lang="ts">
  import { useIntlayer } from "svelte-intlayer";

  let { count }: { count: number } = $props();
  const content = useIntlayer("cart-summary");
</script>

<section>
  <h2>{$content.title}</h2>
  <p>{$content.items(count)}</p>
</section>

Nutzen Sie bereits svelte-i18n? Der @intlayer/svelte-i18n Compat-Adapter versieht das Paket auf Bundler-Ebene mit einem Alias, sodass $_, $date, $number und Ihre flachen Schlüssel weiterhin funktionieren, während Intlayer die Inhalte bereitstellt.

Vor Ihrer endgültigen Entscheidung

Eine Feature-Tabelle zeigt, was eine Bibliothek heute leistet. Die folgenden Punkte zeigen, wie sich der Alltag damit anfühlt.

Überprüfen Sie die Aktivität im Repository.

Commits, Antwortzeiten bei Issues und ob das letzte Minor-Release in diesem Jahr stattfand. Ein solides Konzept ohne aktiven Maintainer ist eine vorprogrammierte Migration.

Wählen Sie nicht rein nach npm-Downloadzahlen.

Die am häufigsten installierte Bibliothek ist diejenige, die zuerst veröffentlicht wurde, nicht zwingend diejenige, die zu einer Svelte-Codebase im Jahr 2026 passt. Downloadzahlen spiegeln Historie wider, nicht Passgenauigkeit.

Hinterfragen Sie, wer die Maintainer finanziert und was verkauft wird.

svelte-i18n wird von Crowdin unterstützt, genau wie next-intl und vue-i18n. i18next wird von Locize unterstützt. Tolgee, Paraglide (inlang) und Intlayer betreiben jeweils eine eigene Plattform. Ein Anbieter, dessen Umsatz auf gehosteter Übersetzung basiert, hat wenig Interesse daran, Übersetzungen innerhalb Ihrer eigenen Toolchain kostenlos zu machen. Intlayer ist die einzige Option im Feld, die KI-Übersetzungen über die CLI mit Ihrem eigenen API-Schlüssel bereitstellt sowie ein CMS bietet, das Sie selbst hosten können.

Ist die Lösung bereit für KI-Agenten?

Agenten haben nach wie vor Schwierigkeiten mit i18n: Sie vergessen Sprachen, erfinden Schlüssel und vermischen Nachrichtensyntaxen. Bietet die Bibliothek Agent Skills oder einen MCP-Server, damit der Agent Inhalte auflisten, auffüllen und testen kann? Und ist das Laden von Inhalten standardmäßig optimiert, oder muss vierteljährlich jemand Namespaces und Lazy-Imports manuell überprüfen?

Typsicherheit out of the box.

Nicht "kann mit zusätzlichem Konfigurationsaufwand typisiert werden", sondern "ein falscher Schlüssel lässt tsc bei einer Neuinstallation fehlschlagen". Prüfen Sie das Verhalten bei einem Schlüssel, der nicht existiert, sowie bei einer Sprache, in der eine Übersetzung fehlt.

Erkennung ungenutzter Inhalte.

Kataloge wachsen meist nur an. Der Build von Intlayer bereinigt ungenutzte Felder und protokolliert diese (build.purge). Paraglide erreicht dies durch seine Architektur, da eine nicht aufgerufene Nachrichtenfunktion dem Tree-Shaking zum Opfer fällt. Alle anderen Optionen überlassen das Aufräumen Ihnen.

Developer Experience.

Einrichtungszeit bis zum ersten übersetzten String, ein LSP oder eine VS Code-Erweiterung, die Übersetzungen beim Hovern anzeigt und zur Deklaration springt, eine CLI zum Befüllen, Testen und Pushen sowie eine Möglichkeit für Nicht-Entwickler, Inhalte über einen visuellen Editor oder ein CMS ohne Pull Request zu bearbeiten.

Häufig gestellte Fragen (FAQ)

Weiterführende Links

• Svelte i18n-Benchmark: Bundle-Größe, Leakage und Sprachwechsel-Timings
• Svelte i18n: Stores, Runes und die Modul-Falle und SvelteKit i18n: Routing, SSR und geteilter Zustand
• Drop-in @intlayer/svelte-i18n Compat-Adapter
• Die Geschichte von JavaScript i18n
• Compiler vs. deklarative i18n
• Per-Komponente vs. Zentralisiertes i18n
• Wie Bundle-Optimierung zur Build-Zeit funktioniert
• i18n in einer Vite + Svelte-App einrichten und in einer SvelteKit-App
• Der gleiche Leitfaden für React, Vue und Solid