Internationalisation Légère : Remplacer les Bibliothèques par l'API Intl

Votre bundle JavaScript inclut Moment.js ? Cela représente 280 Ko pour le formatage de dates. L’API JavaScript Intl native ? Zéro kilooctet. Cette différence frappante représente des milliers d’euros en coûts de bande passante et des secondes de temps de chargement qui impactent directement vos taux de conversion.

Les applications web modernes n’ont pas besoin de lourdes bibliothèques d’internationalisation. L’API JavaScript Intl fournit le formatage de dates, le formatage de nombres, le formatage de devises, la pluralisation et le tri de chaînes—tout cela intégré dans le navigateur. Cet article vous montre comment remplacer Moment.js, date-fns, numeral.js et des bibliothèques similaires par des solutions natives qui améliorent les performances et réduisent la complexité.

Pourquoi Remplacer les Bibliothèques Lourdes par l’API JavaScript Intl

Le Problème de la Taille du Bundle

Les bibliothèques d’internationalisation populaires ajoutent un poids significatif à votre application :

• Moment.js : 280 Ko (67 Ko gzippé)
• date-fns : 75 Ko (17 Ko gzippé) pour les fonctions communes
• numeral.js : 72 Ko (18 Ko gzippé)

Ces chiffres se cumulent lorsque vous incluez les données de locale. L’API JavaScript Intl ne nécessite aucun octet supplémentaire—elle est déjà dans le navigateur.

Support Natif des Navigateurs en 2025

La compatibilité des navigateurs n’est plus une préoccupation. L’API Intl bénéficie d’un support universel sur tous les navigateurs modernes. Seuls Internet Explorer et Opera Mini manquent de support—des navigateurs qui représentent moins de 0,5 % de l’usage global. Vos utilisateurs ont déjà ces API.

Formatage de Date et Heure avec Intl.DateTimeFormat

Formatage de Date Basique

Remplacez le formatage de date Moment.js :

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

// Après : Intl natif
new Intl.DateTimeFormat('fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date()); // "3 octobre 2025"

Options Avancées

L’API native gère les fuseaux horaires et le formatage complexe :

new Intl.DateTimeFormat('fr-FR', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'Europe/Paris'
}).format(new Date()); // "vendredi 3 octobre 2025 à 15:30"

Formatage de Temps Relatif Sans Bibliothèques

Remplacez moment.fromNow() par le temps relatif natif :

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

// Après : Intl natif
const rtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
rtf.format(-2, 'hour'); // "il y a 2 heures"
rtf.format(1, 'day'); // "demain"

L’API gère automatiquement la pluralisation et la localisation à travers les langues.

Formatage de Nombres et Devises Simplifié

Formatage de Nombres

Remplacez numeral.js par le formatage de nombres natif :

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

// Après : Intl natif
new Intl.NumberFormat('fr-FR').format(1234567.89); // "1 234 567,89"
new Intl.NumberFormat('de-DE').format(1234567.89); // "1.234.567,89"

Formatage de Devises

Le formatage de devises natif élimine les dépendances externes :

const formatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR'
});
formatter.format(1234.5); // "1 234,50 €"

// Yen japonais (pas de décimales)
new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
}).format(1234); // "¥1,234"

Pluralisation Intelligente avec Intl.PluralRules

Remplacez la logique conditionnelle complexe par la pluralisation native :

const pr = new Intl.PluralRules('fr-FR', { type: 'ordinal' });
const suffixes = { one: 'er', other: 'e' };

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

ordinal(1); // "1er"
ordinal(2); // "2e"
ordinal(21); // "21e"

Tri de Chaînes Sensible aux Locales avec Intl.Collator

Remplacez le tri personnalisé par la collation native sensible aux locales :

// Tri numérique
const collator = new Intl.Collator('fr', { numeric: true });
['item2', 'item10', 'item1'].sort(collator.compare);
// ["item1", "item2", "item10"]

// Tri français (accents pris en compte)
const frenchCollator = new Intl.Collator('fr');
['élève', 'ecole', 'étude'].sort(frenchCollator.compare);
// ["ecole", "élève", "étude"]

Bonnes Pratiques pour la Production

Mise en Cache des Formateurs

Créez les formateurs une fois et réutilisez-les :

// Mise en cache des formateurs pour les performances
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);
}

Gestion d’Erreurs

Implémentez des solutions de repli pour les entrées invalides :

function safeFormat(date, locale = 'fr-FR', options = {}) {
  try {
    return new Intl.DateTimeFormat(locale, options).format(date);
  } catch (error) {
    console.warn(`Le formatage a échoué pour la locale ${locale}`, error);
    return new Intl.DateTimeFormat('fr-FR', options).format(date);
  }
}

Limitations et Considérations Futures

L’API Intl excelle dans le formatage mais ne gère pas l’arithmétique de dates. Pour les calculs comme ajouter des jours ou trouver des différences entre dates, vous aurez besoin de la future API Temporal ou d’une bibliothèque de calcul légère.

Considérez garder les bibliothèques seulement quand vous avez besoin de :

• Arithmétique de dates complexe
• Analyse de chaînes de dates arbitraires
• Support de navigateurs legacy en dessous d’IE11

Conclusion

L’API JavaScript Intl transforme l’internationalisation d’un fardeau de taille de bundle en une fonctionnalité à coût zéro. En remplaçant Moment.js, date-fns et numeral.js par des API natives, vous éliminez les dépendances, améliorez les performances et simplifiez la maintenance.

Commencez votre migration aujourd’hui : identifiez les utilisations de formatage uniquement de ces bibliothèques et remplacez-les par Intl. Vos utilisateurs bénéficieront de temps de chargement plus rapides, et votre application sera plus maintenable. Le meilleur code est celui que vous n’avez pas à expédier.

FAQ

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.