Baseline : réduisez votre bundle JS de 70 Ko

Réduire son bundle JS sans douleur

Votre projet web pèse lourd. Pas parce que vous codez mal, mais parce que vous shippez des librairies que la plateforme sait désormais gérer toute seule.

En 2026, les navigateurs modernes embarquent des API matures pour l'internationalisation, les requêtes HTTP, les popups, les manipulations de collection et le clonage profond. Le problème ? La plupart des équipes continuent d'importer date-fns, axios, Lodash ou Popper sans se demander si le navigateur ne fait pas déjà le travail.

Cet article vous donne une méthode concrète pour auditer vos dépendances et retirer jusqu'à 70 Ko gzippés de votre bundle — en vous appuyant sur Baseline, le système de classification des API web.

Les poids annoncés dans cet article sont les tailles gzippées réelles des versions courantes de chaque paquet, pas des estimations. Chaque cluster indique ce que vous récupérez et à quelle condition vous pouvez swaper en production.

Qu'est-ce que Baseline (en 30 secondes)

Baseline est porté par le WebDX Community Group, avec Google, Mozilla, Apple et Microsoft. Il classe chaque API web en trois statuts, en fonction de son support dans les quatre navigateurs du socle : Chrome, Edge, Firefox et Safari.

Le délai de 30 mois n'est pas arbitraire : il correspond au temps qu'il faut au parc installé pour se mettre à jour. Une API « Newly available » fonctionne chez tous les utilisateurs à jour, mais pas chez ceux qui ne le sont pas — d'où le fallback.

Avant de supprimer une dépendance, posez-vous ces 3 questions :

1. La plateforme expose-t-elle une API native qui fait le même job ?
2. Quel est son statut Baseline, et mon audience suit-elle ? (croisez avec vos analytics)
3. Quel est le coût (poids, maintenance) de garder la librairie vs le risque du swap ?

Ces trois questions sont le squelette de chaque cluster ci-dessous.

Cluster 1 : Internationalisation (jusqu'à 17 Ko)

Les plus gros gains sont là, et c'est le cluster le plus sûr : tout est Widely available depuis des années.

RelativeTime : fini les "il y a X jours" custom

// ❌ AVANT — librairie ou code maison
import { formatDistanceToNow } from 'date-fns'
formatDistanceToNow(new Date('2026-06-01'))
// → "2 months ago"

// ✅ APRÈS — Intl.RelativeTimeFormat natif
const rtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' })
const diff = Math.floor((Date.now() - new Date('2026-06-01')) / (1000 * 60 * 60 * 24 * 30))
rtf.format(-diff, 'month')
// → "il y a 2 mois"

Baseline : Widely available depuis mars 2023 (Chrome 71+, Firefox 76+, Safari 14+).

Nombres, devises et listes

// Formatage de prix
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(1234.56)
// → "1 234,56 €"

// Listes avec "et" ou "ou"
new Intl.ListFormat('fr', { type: 'disjunction' }).format(['SaaS', 'site', 'app'])
// → "SaaS, site ou app"

Baseline : Widely available toutes les deux — Intl.NumberFormat de longue date, Intl.ListFormat depuis octobre 2023.

Piège : les durées

Intl.DurationFormat est Newly available seulement (depuis mars 2025, quand Firefox 136 a rejoint Chrome 129+ et Safari 16.4+). Feature check obligatoire, ou gardez votre formatage maison pour ce cas précis.

Économie : jusqu'à 17 Ko gzippés — le poids de date-fns en import complet. Si vous l'importez déjà fonction par fonction, comptez plutôt 3 à 6 Ko.

Cluster 2 : Clients HTTP (~18 Ko)

Si vous importez axios ou un wrapper fetch, la plateforme a comblé les lacunes :

// ❌ AVANT — axios
import axios from 'axios'
const response = await axios.get('/api/data', { timeout: 5000 })

// ✅ APRÈS — fetch + AbortSignal.timeout
const response = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000)
})

Attention au statut : AbortSignal.timeout() est Newly available (depuis avril 2024, quand Chrome 124 a rejoint Firefox 100+ et Safari 16+), pas encore Widely available — elle le deviendra le 18 octobre 2026. D'ici là, gardez un garde-fou :

const signal = typeof AbortSignal.timeout === 'function'
  ? AbortSignal.timeout(5000)
  : (() => {
      const controller = new AbortController()
      setTimeout(() => controller.abort(), 5000)
      return controller.signal
    })()

Le fallback pèse cinq lignes, contre 18 Ko pour axios. Pour les uploads avec progression, utilisez l'API ReadableStream. Pour le reste, fetch couvre l'immense majorité des cas.

Économie : ~18 Ko gzippés (axios v1 en import complet).

Cluster 3 : Primitives UI (~10 Ko)

Les dialogues modaux, popups et menus déroulants pèsent lourd dans les bundles. La Popover API change la donne :

<!-- ✅ Un popover natif -->
<button popovertarget="mon-popup">Ouvrir</button>
<div id="mon-popup" popover>
  <p>Contenu du popup — cliquer dehors le ferme.</p>
</div>

Baseline : la Popover API est Newly available (depuis janvier 2025, quand Safari iOS 18.3 a rejoint Chrome 116+, Firefox 125+ et Safari 17+ — elle ne passera Widely available qu'à l'été 2027). Elle dégrade proprement — sans support, le <div popover> reste affiché — donc prévoyez au minimum un [popover]:not(:popover-open) { display: none } et un test HTMLElement.prototype.togglePopover avant de retirer votre librairie.

L'Anchor Positioning en CSS, souvent citée avec elle, est encore en Limited availability : elle n'est pas supportée hors Chromium. Ne construisez pas votre positionnement dessus aujourd'hui.

/* ⏳ Anchor Positioning — Chromium uniquement, à garder en progressive enhancement */
@supports (anchor-name: --a) {
  .anchor { anchor-name: --mon-ancre; }
  .popup {
    position: absolute;
    position-anchor: --mon-ancre;
    top: anchor(bottom);
    left: anchor(center);
  }
}

Concrètement, la Popover API remplace @floating-ui/dom (8 Ko gzippés) et react-popper (2 Ko) pour les cas simples — menus, tooltips, popovers ancrés à leur déclencheur. Pour du positionnement fin multi-navigateur, @floating-ui reste justifié tant qu'Anchor Positioning n'est pas Baseline.

Économie : ~10 Ko gzippés, davantage si vous embarquez en plus une librairie de dialogue complète.

Cluster 4 : Utilitaires Lodash (~25 Ko)

Lodash est souvent importé en entier même quand on utilise 5 fonctions. Voici les remplacements natifs, avec leur statut réel :

// ❌ AVANT
const grouped = _.groupBy(users, 'role')
const cloned = _.cloneDeep(config)
const merged = _.union(tags1, tags2)

// ✅ APRÈS
const grouped = Object.groupBy(users, u => u.role)  // feature check recommandé
const cloned = structuredClone(config)
const merged = [...new Set([...tags1, ...tags2])]

Ce qui reste pertinent : _.debounce et _.throttle pour le scroll et le resize n'ont pas d'équivalent sur la plateforme — importez-les individuellement plutôt que de garder Lodash entier. Object.groupBy est Newly available depuis mars 2024 (Chrome 117+, Firefox 119+, Safari 17.4+) : elle bascule Widely available le 5 septembre 2026, donc gardez un fallback encore quelques semaines.

Économie : ~25 Ko gzippés si vous supprimez Lodash en import complet.

Cluster 5 : Temporal — le cas où il faut attendre

Temporal est la future API de gestion des dates, mais elle n'est pas encore Baseline. Son statut reste « Limited availability » : Firefox l'a livrée en mai 2025 (139), Chrome en janvier 2026 (144), mais Safari ne l'a toujours pas implémentée. Un navigateur manquant sur les quatre du socle, et le statut ne bouge pas.

// ⏳ PAS ENCORE — Temporal.PlainDate
Temporal.Now.plainDateISO()
// Fonctionne dans Chrome et Firefox, TypeError dans Safari

Décision : ne remplacez pas date-fns ou dayjs par Temporal aujourd'hui. Surveillez son statut Baseline. Quand il passera « Newly available », il remplacera toutes les librairies de dates — c'est le seul cluster où attendre est la bonne stratégie.

La méthode pour auditer vos dépendances

Ce que j'ai fait pour ces 5 clusters, vous pouvez le reproduire sur votre projet ce trimestre :

1. Listez vos dépendances de production — tout ce qui finit dans le bundle client :

   npx cost-of-modules
   # ou : npx webpack-bundle-analyzer
   

2. Mesurez le coût réel de chacune — poids gzippé, pas minifié. Le sentiment de "c'est petit" diffère souvent de la réalité.

3. Vérifiez le statut Baseline de l'API de remplacement sur webstatus.dev :

   • Widely available → swap direct, pas de fallback
   • Newly available → swap avec feature check + fallback
   • Limited availability → gardez la librairie, notez pour plus tard

4. Feature check + fallback pattern :

   if (typeof Object.groupBy === 'function') {
     // API native — aucun poids ajouté
   } else {
     // Fallback léger ou chargement conditionnel
   }
   

Ce que vous pouvez faire dès cette semaine

Voici une checklist ordonnée par impact décroissant, avec les poids gzippés réels :

• Retirez lodash en import complet au profit des alternatives natives — ~25 Ko
• Remplacez axios par fetch + AbortSignal.timeout avec fallback — ~18 Ko
• Passez date-fns en imports ciblés, ou à Intl quand c'est du formatage — jusqu'à 17 Ko
• Basculez vos popups simples sur la Popover API — ~10 Ko
• Gardez _.debounce, _.throttle et vos manipulations de dates complexes — attendez Temporal

Total potentiel : jusqu'à 70 Ko gzippés retirés du bundle critique, pour un projet qui embarque les quatre familles en import complet.

Sur une connexion 3G, 70 Ko représentent un peu moins de deux secondes de téléchargement — et autant de scripts en moins à parser sur un mobile d'entrée de gamme, ce qui pèse souvent plus lourd que le transfert lui-même.

La plateforme web évolue. En 2026, la question n'est plus "quelle librairie ajouter" mais "quelle librairie enlever". Baseline vous donne la réponse — à vous de l'appliquer.

Vous voulez savoir ce que pèse vraiment votre bundle ? On fait cet audit Baseline sur les projets qu'on livre. Parlons-en.

Ressources

• Baseline sur web.dev — la définition officielle des trois statuts et du délai de 30 mois
• webstatus.dev — le tableau de bord officiel pour vérifier le statut Baseline d'une API
• Bundlephobia — le poids gzippé réel d'un paquet npm, source des chiffres de cet article
• Can I Use — le détail du support par version de navigateur
• KODY — agence web à Lyon — on conçoit et développe des sites et applications web performants