Optimisation de Code

Prêt à faire maigrir le bundle ?

Bundle

Vous êtes en train de reviewer une Pull Request (PR) pour l'affichage des dates. Le développeur a installé Moment.js pour une simple formatting de date (YY/MM/DD).

Allez sur Bundlephobia.com.
Tapez moment dans la recherche.
Cherchez une alternative plus légère (indice : tapez "date" ou regardez les recommandations en bas de page comme dayjs ou date-fns).

Question : Combien de kilo-octets (Min + Gzip) gagnez-vous en remplaçant moment par dayjs ?

💡 Voir la réponse

Moment.js : ~70kB (Min + Gzip) -> Enorme !
Day.js : ~2kB (Min + Gzip) -> Minuscule.
Gain : 97% de réduction de poids. C'est critique sur mobile.

Image

Voici une balise image classique :

<img src="banniere-4k.jpg" alt="Promotion d'été">

Le fichier banniere-4k.jpg fait 2MB. Sur mobile (375px de large), c'est du gaspillage.

Défi : Écrivez la balise <img> idéale utilisant srcset pour servir :

banniere-sm.jpg (400px) sur mobile.
banniere-md.jpg (800px) sur tablette.
banniere-lg.jpg (1200px) sur desktop.

💡 Voir la correction

<img 
  src="banniere-md.jpg" 
  srcset="banniere-sm.jpg 400w, banniere-md.jpg 800w, banniere-lg.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Promotion d'été"
  loading="lazy"
>

srcset : Les ressources disponibles et leur largeur réelle (400w).
sizes : Quelle taille l'image prendra à l'écran (ex: "sur mobile elle fait 100% de la largeur").

Optimisation de Code

Bundle

Image

On this page