Comment réduire un bundle de dates à deux kilooctets sans douleur

Chaque développeur frontend a au moins une fois jeté un œil à un rapport Webpack Bundle Analyzer avec une terreur silencieuse. Une énorme part du gâteau était presque toujours occupée par Moment.js ainsi que des dizaines de locales que personne n'avait demandé d'inclure dans le bundle. Le projet est depuis longtemps passé en mode legacy, les auteurs eux-mêmes recommandent de chercher des alternatives, mais les vieilles habitudes ont la vie dure. Le chaînage de méthodes familier et le formatage de chaînes sont ancrés dans vos doigts au niveau de la mémoire musculaire.

C'est exactement pour cela que Day.js a été créé. La bibliothèque pèse seulement 2 kilooctets compressés, tout en maintenant une compatibilité API quasi totale avec Moment.js.

Ce qu'il y a sous le capot et pourquoi c'est si léger

Le problème principal des anciennes bibliothèques était leur nature monolithique. Vous incluiez un package juste pour le formatage de dates, et le bundler traînait avec lui des parseurs de fuseaux horaires, la gestion du temps relatif et des traductions dans une centaines de langues.

Day.js est construit différemment. Le cœur contient l'analyse syntaxique de base, la validation, les manipulations simples et le formatage avec des motifs standards. Toutes les autres fonctionnalités sont divisées en plugins indépendants. Si vous avez besoin de calculer des trimestres ou un motif personnalisé complexe, vous importez un module séparé.

Les locales fonctionnent sur le même principe. Aucun espagnol ni chinois ne se retrouvera dans votre bundle final tant que vous n'appelez pas explicitement un import pour le fichier nécessaire.

import dayjs from 'dayjs'
import 'dayjs/locale/ru'

dayjs.locale('ru')

Immutabilité sans surprises

Si vous avez travaillé avec l'ancien Moment, vous avez probablement rencontré les pièges de la mutation. Il suffisait de passer un objet date à une fonction utilitaire et d'appeler .add(1, 'day') dessus, et la date originale changeait dans toute l'application. Déboguer de tels bugs était un plaisir douteux.

Day.js rend tous les objets immuables. Toute opération de manipulation retourne une nouvelle instance, laissant l'original intact.

const today = dayjs('2024-01-01')
const tomorrow = today.add(1, 'day')

console.log(today.format('YYYY-MM-DD'))    // 2024-01-01
console.log(tomorrow.format('YYYY-MM-DD')) // 2024-01-02

Ce comportement élimine le besoin de clonage d'objet inutile avant chaque calcul.

API familière et chaînage de méthodes

Passer à de nouveaux outils est souvent bloqué par la nécessité de reformer l'équipe. Avec Day.js, il n'y a pas besoin de reformer. Presque chaque méthode ressemble exactement à celles du code écrit il y a cinq ans.

L'analyse syntaxique, les modifications de valeurs et le formatage peuvent être chaînés ensemble :

dayjs()
  .startOf('month')
  .add(7, 'day')
  .set('hour', 12)
  .format('YYYY-MM-DD HH:mm:ss')

Les vérifications conditionnelles sont également concises :

const deadline = dayjs('2024-12-31')
const isExpired = dayjs().isAfter(deadline)

Plugins pour les tâches non standard

Le minimalisme du cœur ne signifie pas un manque de fonctionnalités. Quand les fonctionnalités de base ne suffisent plus, les plugins entrent en jeu. Cela se fait en quelques lignes avec la méthode dayjs.extend().

Par exemple, si votre projet a besoin de jetons de formatage rares ou de nombres ordinaux :

import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'

dayjs.extend(advancedFormat)

dayjs().format('Q Do k kk X x')

Le temps relatif (format comme "il y a 5 minutes"), la gestion UTC, le calcul des différences de jours en tenant compte des heures ouvrables et le support des semaines ISO sont connectés de la même manière. Vous ne payez en taille de bundle que pour ce que vous utilisez réellement dans votre projet.

À qui le projet convient et qui devrait passer son chemin

Day.js s'intègre parfaitement dans les applications où la vitesse de chargement de la première page compte. Pour les landing pages, les interfaces mobiles, les panneaux d'administration et les tableaux de bord clients, c'est l'une des meilleures options en termes de ratio fonctionnalités-taille.

Cependant, il y a des situations où vous devriez choisir d'autres options :

• Si vous construisez une architecture from scratch ciblant les navigateurs modernes, jetez un œil à l'objet natif Intl ou à la future API Temporal. Pour des tâches de formatage simples, une bibliothèque tierce peut ne pas être nécessaire du tout.
• Si votre projet utilise déjà activement une approche fonctionnelle et une architecture de style lodash, vous pourriez trouver plus pratique d'utiliser date-fns, où les fonctions sont importées individuellement.

Pour tous les autres cas, surtout lors de la migration depuis une base de code Moment.js, Day.js reste la solution la plus painless et la plus rapide. Vous changez simplement le nom de l'import dans vos packages et supprimez des dizaines de kilooctets de poids inutile de votre bundle.