13.1 — Réduire le poids CSS & JS

⏱️ TL;DR — Le CSS complet de Bootstrap est confortable en dev mais lourd en prod si on charge tout. Quatre leviers : build Sass minimal (n’importer que le nécessaire), purge des classes utilitaires inutilisées (PurgeCSS), tree-shaking JS (imports ciblés), et minification + compression (gzip/brotli). Ensemble, ils réduisent drastiquement le poids livré.

🎯 Objectifs

• Combiner build minimal et purge.
• Tree-shaker le JS.
• Activer minification et compression.

1. Build Sass minimal

Rappel de la Partie 8.6 : importez le socle + seulement les modules utilisés, retirez les couleurs de thème inutiles (map-remove), désactivez les options inutiles ($enable-*: false).

2. Purge des utilitaires

Les utilitaires génèrent beaucoup de classes, dont vous n’utilisez qu’une fraction. PurgeCSS scanne votre HTML/JSX et supprime les classes absentes :

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./**/*.html', './src/**/*.{js,jsx,ts,tsx}'],
      safelist: [/^modal/, /^show/, /^collapsing/, /^fade/] // classes ajoutées par le JS
    })
  ]
}

safelist est crucial : les classes que le JS ajoute dynamiquement (show, collapsing, modal-backdrop…) n’apparaissent pas dans le markup statique et seraient purgées à tort.

3. Tree-shaking du JS

// ❌ importe tout
import * as bootstrap from 'bootstrap'
// ✅ importe seulement ce qu'on utilise
import { Modal, Dropdown } from 'bootstrap'

Avec un bundler moderne, seuls les plugins importés finissent dans le bundle.

4. Minification & compression

• Minifier : servez .min.css/.min.js (ou laissez votre bundler minifier).
• Compresser : activez gzip ou brotli au niveau du serveur/CDN — c’est souvent le plus gros gain (le CSS se compresse très bien).
• Cache : en-têtes Cache-Control longue durée + hash dans le nom de fichier.

Ordre d’impact

⚠️ Piège — Purger sans safelist : la modale s’ouvre mais reste invisible, l’accordéon ne s’anime plus… parce que les classes ajoutées par le JS (show, collapsing) ont été supprimées. Toujours protéger ces classes dynamiques.

💡 Pour un dev React / Next.js — Next minifie et compresse déjà en prod. Ajoutez PurgeCSS via PostCSS pour les utilitaires, avec une safelist des classes dynamiques. Et préférez react-bootstrap avec imports nommés : le tree-shaking élimine les composants non utilisés.

✏️ Exercices

1. Pourquoi faut-il une safelist lors de la purge ?

2. Transformer import * as bootstrap from 'bootstrap' en version tree-shakée pour une modale.

🧠 Quiz de révision

Chapitre suivant : 13.2 — Bootstrap Icons & CDN