Zo reduceer je een date-bundle tot twee kilobyte zonder gedoe

Elke frontend-ontwikkelaar heeft minstens één keer met stille horror naar een Webpack Bundle Analyzer-rapport gekeken. Een enorme plak van de taart werd vrijwel altijd bezet door Moment.js samen met tientallen locales die niemand had gevraagd om te bundelen. Het project is al lang overgegaan naar legacy-status, de auteurs raden zelf aan om naar alternatieven te kijken, maar oude gewoonten hardnekkig zijn. De vertrouwde method chaining en string-opmaak zijn in je vingers geworteld op spiergeheugenniveau.

Daarvoor is Day.js precies gemaakt. De bibliotheek weegt slechts 2 kilobytes gecomprimeerd, terwijl hij vrijwel 100% API-compatibiliteit met Moment.js behoudt.

Wat zit er onder de motorkap en waarom is het zo lichtgewicht

Het hoofdprobleem met oude bibliotheken was hun monolithische aard. Je nam een pakket alleen voor datumopmaak, en de bundler sleepte timezone-parsers, relatieve tijdafhandeling en vertalingen in honderd talen mee.

Day.js is anders opgebouwd. De kern bevat basis-parsing, validatie, eenvoudige manipulaties en opmaak met standaardpatronen. Alle andere functionaliteit is opgesplitst in onafhankelijke plugins. Als je kwartalen van het jaar of een complex aangepast patroon moet berekenen, importeer je een apart module.

Locales werken volgens hetzelfde principe. Geen Spaans of Chinees belandt in je uiteindelijke bundle totdat je expliciet een import aanroept voor het benodigde bestand.

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

dayjs.locale('ru')

Onveranderlijkheid zonder verrassingen

Als je met de oude Moment hebt gewerkt, ben je waarschijnlijk tegen de valkuilen van mutatie aangelopen. Het was voldoende om een date-object door te geven aan een helperfunctie en daar .add(1, 'day') aan te roepen, en de oorspronkelijke datum zou door de hele applicatie veranderen. Het debuggen van dergelijke bugs was een twijfelachtig genoegen.

Day.js maakt alle objecten onveranderlijk. Elke manipulatie-operatie retourneert een nieuw exemplaar, waarbij het oorspronkelijke onaangeroerd blijft.

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

Dit gedrag elimineert de noodzaak voor onnodig object-klonen voor elke berekening.

Vertrouwde API en method chaining

Overschakelen naar nieuwe tools wordt vaak vertraagd door de noodzaak om het team bij te scholen. Met Day.js is er geen bijscholing nodig. Vrijwel elke methode ziet er exact hetzelfde uit als in code die vijf jaar geleden is geschreven.

Parsing, waardewijzigingen en opmaak kunnen aan elkaar worden gekoppeld:

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

Conditionele controles zien er ook beknopt uit:

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

Plugins voor niet-standaard taken

Minimalisme van de kern betekent geen gebrek aan functies. Wanneer basisfunctionaliteit niet meer volstaat, komen plugins in beeld. Dit wordt gedaan in een paar regels met de dayjs.extend() methode.

Bijvoorbeeld, als je project zeldzame opmaaktokens of rangtelwoorden nodig heeft:

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

dayjs.extend(advancedFormat)

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

Relatieve tijd (formaat zoals "5 minuten geleden"), UTC-afhandeling, het berekenen van dagverschillen met rekening houdend met kantooruren, en ISO-weekondersteuning worden op dezelfde manier aangesloten. Je betaalt alleen met bundelgrootte voor wat je daadwerkelijk gebruikt in je project.

Voor wie het project geschikt is en wie het beter kan overslaan

Day.js past perfect in applicaties waar de snelheid van de eerste pagina-lading belangrijk is. Voor landingspagina's, mobiele interfaces, adminpanelen en client-dashboards is het een van de beste opties qua functies-per-grootte-verhouding.

Er zijn echter situaties waarin je andere opties moet kiezen:

• Als je een architectuur helemaal opnieuw bouwt voor moderne browsers, neem dan een kijkje naar het native Intl-object of de aankomende Temporal API. Voor eenvoudige opmaaktaken is een bibliotheek van derden misschien helemaal niet nodig.
• Als je project al actief een functionele aanpak en lodash-stijl architectuur gebruikt, vind je het misschien handiger om date-fns te gebruiken, waar functies individueel worden geïmporteerd.

Voor alle andere gevallen, vooral bij migratie van een Moment.js-codebase, blijft Day.js de meest pijnloze en snelste oplossing. Je verandert simpelweg de importnaam in je packages en knipt tientallen kilobytes nutteloos gewicht uit je bundle.