Quiz 19 — Production & migration
⏱️ TL;DR — 50 questions sur la réduction de poids, les icônes, le CDN, la migration v4→v5 et l’horizon Bootstrap 6 (Partie 13). Réponds de tête, puis déplie.
1. Les quatre leviers de réduction de poids ?
Réponse
Build Sass minimal, purge, tree-shaking JS, minif + compression.
2. Que fait PurgeCSS ?
Réponse
Supprime les classes non trouvées dans le contenu scanné.
3. Pourquoi une safelist ?
Réponse
Protéger les classes ajoutées par le JS (show, collapsing…).
4. Sans safelist, quel bug ?
Réponse
Modale/accordéon cassés (classes dynamiques purgées).
5. Tree-shaker le JS ?
Réponse
Imports nommés.
6. Réglage serveur au plus gros gain ?
Réponse
Compression gzip/brotli.
7. Cache long : quelle technique de nom de fichier ?
Réponse
Hash dans le nom.
8. Bootstrap inclut-il des icônes ?
Réponse
Non — lib Bootstrap Icons séparée.
9. Utiliser une font-icon ?
Réponse
<i class="bi bi-...">.
10. Comment une font-icon prend sa couleur ?
Réponse
currentColor (donc text-*).
11. Peu d’icônes en prod : font ou SVG ?
Réponse
SVG inline.
12. Icône décorative : quel attribut ?
Réponse
aria-hidden="true".
13. Icône porteuse de sens : quoi ajouter ?
Réponse
Un aria-label.
14. Avantage auto-hébergement vs CDN ?
Réponse
Contrôle versions + intégration pipeline.
15. Avantage CDN ?
Réponse
Cache mondial, SRI, zéro hébergement.
16. En React, une icône devient… ?
Réponse
Un composant (tree-shakable).
17. data-toggle (v4) → ?
Réponse
data-bs-toggle.
18. .badge-primary → ?
Réponse
.text-bg-primary.
19. .sr-only → ?
Réponse
.visually-hidden.
20. .no-gutters → ?
Réponse
.g-0.
21. .ml-*/.mr-* → ?
Réponse
.ms-*/.me-*.
22. jQuery en v5 : requis ?
Réponse
Non.
23. Les contrôles custom-* (v4) deviennent… ?
Réponse
Classes .form-* unifiées.
24. Nouveauté à adopter en migrant vers 5.3 ?
Réponse
Color modes (data-bs-theme).
25. Comment est décrit Bootstrap 6 ?
Réponse
« Reset conceptuel », en développement.
26. Version à viser en production aujourd’hui ?
Réponse
5.3.
27. Étape la plus oubliée en migration v4→v5 ?
Réponse
Préfixer les data-attributes.
28. Épingler la version : pourquoi ?
Réponse
Tester avant de bumper.
29. .close (v4) → ?
Réponse
.btn-close.
30. Le CSS complet est-il un souci en prod ?
Réponse
Lourd si tout chargé (purgeable).
31. Servir le CSS minifié ?
Réponse
.min.css.
32. Directions probables de Bootstrap 6 ?
Réponse
Container queries, :has(), couches CSS, allègement.
33. Migrer 5.0→5.3 : difficulté ?
Réponse
Indolore.
34. Base bien faite = migration… ?
Réponse
Triviale.
35. Purger les utilitaires : quel gain ?
Réponse
Beaucoup de classes utilitaires inutilisées supprimées.
36. La font Bootstrap Icons pour 3 icônes : problème ?
Réponse
Poids inutile.
37. react-bootstrap-icons fournit quoi ?
Réponse
Chaque icône en composant React.
38. Next.js minifie-t-il en prod ?
Réponse
Oui.
39. Comment vérifier les classes dynamiques à protéger ?
Réponse
Les lister dans la safelist (regex sur show, fade…).
40. Un build « grille + boutons + utilitaires » pèse… ?
Réponse
Une fraction du CSS complet.
41. text-left/right (v4) → ?
Réponse
text-start/end.
42. Nouveautés utilitaires 5.3 ?
Réponse
z-*, object-fit-*, progress-stacked.
43. Bootstrap 6 est-il stable ?
Réponse
Non.
44. Construire proprement en 5.3 prépare quoi ?
Réponse
La future migration vers la 6.
45. Recherche globale utile avant migration ?
Réponse
data-toggle/data-target/data-dismiss.
46. Compresser le CSS : pourquoi efficace ?
Réponse
Le CSS se compresse très bien.
47. Sprite SVG : intérêt ?
Réponse
Réunir plusieurs icônes SVG efficacement.
48. Installer les icônes en npm ?
Réponse
npm install bootstrap-icons.
49. Importer le CSS des icônes ?
Réponse
import 'bootstrap-icons/font/bootstrap-icons.css'.
50. Résumé : cible stable + horizon ?
Réponse
5.3 stable ; 6 en développement.
Quiz suivant : Quiz 20 — Révision générale (expert).