Come ridurre un bundle per date a due kilobyte senza fatica

Ogni sviluppatore frontend ha almeno una volta guardato un report di Webpack Bundle Analyzer con un silenzioso orrore. Una fetta enorme della torta era quasi sempre occupata da Moment.js insieme a decine di localizzazioni che nessuno ha mai chiesto di includere nel bundle. Il progetto è ormai passato allo stato di legacy, gli stessi autori consigliano di cercare alternative, ma le vecchie abitudini sono dure a morire. La familiare concatenazione dei metodi e la formattazione delle stringhe sono impresse nelle dita a livello di memoria muscolare.

È esattamente per questo che è stato creato Day.js. La libreria pesa solo 2 kilobyte compressi, mantenendo quasi il 100% di compatibilità API con Moment.js.

Cosa c'è sotto il cofano e perché è così leggera

Il problema principale delle vecchie librerie era la loro natura monolitica. Includevi un pacchetto solo per la formattazione delle date, e il bundler trascinava con sé parser per i fusi orari, gestione del tempo relativo e traduzioni in centinaia di lingue.

Day.js è costruita in modo diverso. Il nucleo contiene le funzionalità essenziali: parsing, validazione, manipolazioni semplici e formattazione con pattern standard. Tutte le altre funzionalità sono suddivise in plugin indipendenti. Se hai bisogno di calcolare i trimestri dell'anno o un pattern personalizzato complesso, importi un modulo separato.

Le localizzazioni funzionano allo stesso principio. Nessuno spagnolo o cinese finirà nel tuo bundle finale finché non chiami esplicitamente un import per il file necessario.

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

dayjs.locale('ru')

Immutabilità senza sorprese

Se hai lavorato con il vecchio Moment, probabilmente sei incappato negli inconvenienti della mutazione. Bastava passare un oggetto data a una funzione helper e chiamare .add(1, 'day') lì, e la data originale cambiava in tutta l'applicazione. Il debug di questi bug era un piacere discutibile.

Day.js rende tutti gli oggetti immutabili. Qualsiasi operazione di manipolazione restituisce una nuova istanza, lasciando l'originale intatto.

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

Questo comportamento elimina la necessità di clonare oggetti non necessari prima di ogni calcolo.

API familiare e concatenazione dei metodi

Passare a nuovi strumenti spesso si blocca a causa della necessità di riqualificare il team. Con Day.js, non c'è bisogno di riqualificare. Quasi ogni metodo appare esattamente uguale al codice scritto cinque anni fa.

Parsing, modifiche dei valori e formattazione possono essere concatenati insieme:

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

I controlli condizionali appaiono altrettanto concisi:

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

Plugin per attività non standard

Il minimalismo del nucleo non significa mancanza di funzionalità. Quando le funzionalità base non bastano, entrano in gioco i plugin. Si fa con un paio di righe usando il metodo dayjs.extend().

Ad esempio, se il tuo progetto ha bisogno di token di formattazione rari o numeri ordinali:

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

dayjs.extend(advancedFormat)

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

Il tempo relativo (formato come "5 minuti fa"), la gestione UTC, il calcolo delle differenze tra date tenendo conto delle ore lavorative e il supporto per le settimane ISO vengono collegati allo stesso modo. Paghi con la dimensione del bundle solo per ciò che usi effettivamente nel tuo progetto.

A chi fa bene il progetto e chi dovrebbe evitarlo

Day.js si adatta perfettamente alle applicazioni dove la velocità di caricamento della prima pagina è importante. Per landing page, interfacce mobile, pannelli di amministrazione e dashboard dei clienti, è una delle migliori opzioni in termini di rapporto funzionalità-dimensioni.

Tuttavia, ci sono situazioni in cui dovresti scegliere altre opzioni:

• Se stai costruendo un'architettura da zero orientata ai browser moderni, dai un'occhiata all'oggetto Intl nativo o alla prossima Temporal API. Per attività di formattazione semplici, potrebbe non essere necessaria affatto una libreria di terze parti.
• Se il tuo progetto usa già attivamente un approccio funzionale e un'architettura di tipo lodash, potresti trovare più comodo usare date-fns, dove le funzioni vengono importate individualmente.

Per tutti gli altri casi, specialmente quando si migra da una codebase Moment.js, Day.js rimane la soluzione più indolore e veloce. Cambi semplicemente il nome dell'import nei tuoi pacchetti e tagli decine di kilobyte di peso inutile dal tuo bundle.