Leichtgewichtige Internationalisierung: Bibliotheken durch die Intl API ersetzen

Ihr JavaScript-Bundle enthält Moment.js? Das sind 280KB nur für die Datumsformatierung. Die native JavaScript Intl API? Null Kilobytes. Dieser drastische Unterschied entspricht tausenden von Euro an Bandbreitenkosten und Sekunden an Ladezeit, die sich direkt auf Ihre Conversion-Raten auswirken.

Moderne Webanwendungen benötigen keine schweren Internationalisierungsbibliotheken. Die JavaScript Intl API bietet Datumsformatierung, Zahlenformatierung, Währungsformatierung, Pluralisierung und String-Sortierung – alles direkt im Browser integriert. Dieser Artikel zeigt Ihnen, wie Sie Moment.js, date-fns, numeral.js und ähnliche Bibliotheken durch native Lösungen ersetzen, die die Performance verbessern und die Komplexität reduzieren.

Warum schwere Bibliotheken durch die JavaScript Intl API ersetzen

Das Bundle-Size-Problem

Beliebte Internationalisierungsbibliotheken fügen erhebliches Gewicht zu Ihrer Anwendung hinzu:

• Moment.js: 280KB (67KB gzipped)
• date-fns: 75KB (17KB gzipped) für häufige Funktionen
• numeral.js: 72KB (18KB gzipped)

Diese Zahlen potenzieren sich, wenn Sie Locale-Daten einschließen. Die JavaScript Intl API benötigt null zusätzliche Bytes – sie ist bereits im Browser vorhanden.

Native Browser-Unterstützung in 2025

Browser-Kompatibilität ist kein Problem mehr. Die Intl API hat universelle Unterstützung in allen modernen Browsern. Nur Internet Explorer und Opera Mini fehlt die Unterstützung – Browser, die weniger als 0,5% der globalen Nutzung repräsentieren. Ihre Nutzer haben diese APIs bereits.

Datums- und Zeitformatierung mit Intl.DateTimeFormat

Grundlegende Datumsformatierung

Moment.js Datumsformatierung ersetzen:

// Vorher: Moment.js
moment().format('MMMM DD, YYYY'); // "October 3, 2025"

// Nachher: Native Intl
new Intl.DateTimeFormat('de-DE', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date()); // "3. Oktober 2025"

Erweiterte Optionen

Die native API behandelt Zeitzonen und komplexe Formatierung:

new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'Europe/Berlin'
}).format(new Date()); // "Freitag, 3. Oktober 2025 um 15:30"

Relative Zeitformatierung ohne Bibliotheken

moment.fromNow() durch native relative Zeit ersetzen:

// Vorher: Moment.js
moment().subtract(2, 'hours').fromNow(); // "2 hours ago"

// Nachher: Native Intl
const rtf = new Intl.RelativeTimeFormat('de', { numeric: 'auto' });
rtf.format(-2, 'hour'); // "vor 2 Stunden"
rtf.format(1, 'day'); // "morgen"

Die API behandelt automatisch Pluralisierung und Lokalisierung über verschiedene Sprachen hinweg.

Zahlen- und Währungsformatierung leicht gemacht

Zahlenformatierung

numeral.js durch native Zahlenformatierung ersetzen:

// Vorher: numeral.js
numeral(1234567.89).format('0,0.00'); // "1,234,567.89"

// Nachher: Native Intl
new Intl.NumberFormat('en-US').format(1234567.89); // "1,234,567.89"
new Intl.NumberFormat('de-DE').format(1234567.89); // "1.234.567,89"

Währungsformatierung

Native Währungsformatierung eliminiert externe Abhängigkeiten:

const formatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});
formatter.format(1234.5); // "1.234,50 €"

// Japanischer Yen (keine Dezimalstellen)
new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
}).format(1234); // "¥1,234"

Intelligente Pluralisierung mit Intl.PluralRules

Komplexe bedingte Logik durch native Pluralisierung ersetzen:

const pr = new Intl.PluralRules('de-DE', { type: 'ordinal' });
const suffixes = { one: '.', two: '.', few: '.', other: '.' };

function ordinal(n) {
  const rule = pr.select(n);
  return `${n}${suffixes[rule]}`;
}

ordinal(1); // "1."
ordinal(22); // "22."
ordinal(103); // "103."

Locale-bewusste String-Sortierung mit Intl.Collator

Benutzerdefinierte Sortierung durch native locale-bewusste Kollation ersetzen:

// Numerisch-bewusste Sortierung
const collator = new Intl.Collator('de', { numeric: true });
['item2', 'item10', 'item1'].sort(collator.compare);
// ["item1", "item2", "item10"]

// Deutsche Sortierung (ä kommt nach a)
const germanCollator = new Intl.Collator('de');
['Müller', 'Mueller', 'Maler'].sort(germanCollator.compare);
// ["Maler", "Mueller", "Müller"]

Best Practices für die Produktion

Formatter-Caching

Formatter einmal erstellen und wiederverwenden:

// Formatter für Performance cachen
const formatters = new Map();

function getCurrencyFormatter(locale, currency) {
  const key = `${locale}-${currency}`;
  if (!formatters.has(key)) {
    formatters.set(key, new Intl.NumberFormat(locale, {
      style: 'currency',
      currency
    }));
  }
  return formatters.get(key);
}

Fehlerbehandlung

Fallbacks für ungültige Eingaben implementieren:

function safeFormat(date, locale = 'de-DE', options = {}) {
  try {
    return new Intl.DateTimeFormat(locale, options).format(date);
  } catch (error) {
    console.warn(`Formatierung für Locale ${locale} fehlgeschlagen`, error);
    return new Intl.DateTimeFormat('de-DE', options).format(date);
  }
}

Einschränkungen und zukünftige Überlegungen

Die Intl API glänzt bei der Formatierung, behandelt aber keine Datumsarithmetik. Für Berechnungen wie das Hinzufügen von Tagen oder das Finden von Unterschieden zwischen Daten benötigen Sie die kommende Temporal API oder eine leichtgewichtige Berechnungsbibliothek.

Erwägen Sie, Bibliotheken nur zu behalten, wenn Sie benötigen:

• Komplexe Datumsarithmetik
• Parsen beliebiger Datumsstrings
• Legacy-Browser-Unterstützung unter IE11

Fazit

Die JavaScript Intl API verwandelt Internationalisierung von einer Bundle-Size-Belastung in ein kostenloses Feature. Durch das Ersetzen von Moment.js, date-fns und numeral.js mit nativen APIs eliminieren Sie Abhängigkeiten, verbessern die Performance und vereinfachen die Wartung.

Beginnen Sie noch heute mit Ihrer Migration: Identifizieren Sie reine Formatierungsverwendungen dieser Bibliotheken und ersetzen Sie sie durch Intl. Ihre Nutzer werden schnellere Ladezeiten erleben, und Ihre Anwendung wird wartbarer sein. Der beste Code ist der Code, den Sie nicht ausliefern müssen.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.