BULK TEST v3 — newer

Ihre Übersetzungsdateien töten stillschweigend Ihre Seitenladezeiten. Eine typische internationalisierte App mit über 500 Schlüsseln erzeugt Übersetzungspakete von 400-800KB pro Sprache. Multiplizieren Sie das mit 15 Sprachen, und Sie liefern 6-12MB an Übersetzungen — von denen die meisten Benutzer nie sehen.

Dieser Leitfaden erklärt, warum das passiert, wie Namespace-basierte Aufteilung es löst, und die praktischen Implementierungsmuster, die Übersetzungslasten um 90-97% reduzieren.

Die versteckten Kosten monolithischer Übersetzungsdateien

Die meisten i18n-Setups beginnen einfach: eine translations.json-Datei pro Sprache. Bei 50 Schlüsseln funktioniert das gut. Aber Produktions-Apps wachsen schnell:

Praxisbeispiel: Unsere eigene Landing Page bei Better i18n wuchs auf 699 Schlüssel in 59 Namespaces. Die englische translations.json war 478KB. Die Hindi-Übersetzung 841KB. Jeder Besucher lud die gesamte Datei herunter — selbst wenn er nur die Preisseite besuchte (14 Schlüssel, ~2KB benötigt).

Was sind i18n-Namespaces?

Namespaces sind logische Gruppen innerhalb Ihrer Übersetzungen — typischerweise nach Seite, Feature oder Domäne organisiert:

{
  "hero": {
    "title": "Übersetzungen schneller ausliefern",
    "subtitle": "KI-gestützte Lokalisierung für moderne Apps"
  },
  "pricing": {
    "title": "Einfache, transparente Preise",
    "monthly": "Monatlich",
    "yearly": "Jährlich"
  }
}

Bibliotheken wie i18next, react-intl und Better i18n unterstützen Namespaces. Die typische Verwendung ist useTranslations("pricing") — Sie teilen dem SDK bereits mit, welchen Namespace Sie benötigen.

Drei Strategien zur Aufteilung

Strategie 1: Namespace-basierte CDN-Dateien

Statt einer monolithischen Datei veröffentlichen Sie jeden Namespace als separate Datei:

Vorher: /en/translations.json → 478 KB (alle 59 Namespaces)
Nachher: /en/hero.json → 1.2 KB, /en/pricing.json → 2.1 KB, ...

Wenn eine Seite hero + pricing + footer braucht:

• Vorher: 478 KB → Nachher: 4.1 KB (99% Reduktion)

Strategie 2: Namespace-Query-Parameter

GET /en/translations.json?ns=hero,pricing,footer
← Liefert nur angeforderte Namespaces (~4 KB)

Strategie 3: Build-Time Code Splitting

const i18nConfig = {
  resourceLoader: (language, namespace) =>
    import(`./locales/${language}/${namespace}.json`),
};

Performance-Benchmarks

Fazit

Große Übersetzungsdateien sind ein lösbares Performance-Problem. Für Apps mit 15+ Sprachen und 500+ Schlüsseln kann diese Änderung Übersetzungslasten um 90-97% reduzieren und CDN-Bandbreite um 95% senken.