Reduit Bootstrap a son reboot : 1298 regles ramenees a 76

Aucune classe Bootstrap n'apparait dans le code Razor. Mais le retirer aurait
casse la mise en page : mesure a l'appui, 124 elements sur 124 changeaient —
box-sizing retombait a content-box, la police a Arial nu, les boutons a 13,3 px,
et la marge de main perdait 24 px. app.css ne pose aucune de ces bases.

Ce qui servait, c'etait donc le socle, pas les composants — et Bootstrap le
livre separement. Styles calcules compares sur 12 routes et 785 elements entre
le complet et le reboot : zero ecart. Verifie ensuite apres rechargement reel,
a 320, 375 et 1280 px, sans debordement horizontal.

228 Ko -> 10 Ko, soit 31 Ko -> 3,2 Ko une fois compresse. Le poids n'etait pas
l'enjeu : 31 Ko sur une archive de 65 Mo est negligeable, et c'est ce qui a
failli faire garder le fichier. Le gain est de ne plus embarquer 1222 regles
inutilisees.

628 tests au vert, publish verifie.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
mathieu
2026-08-22 12:25:47 +02:00
co-authored by Claude Opus 5
parent fa40539d26
commit edb8707c97
4 changed files with 62 additions and 7 deletions
+48
View File
@@ -2262,6 +2262,54 @@ ci-dessus. ⚠️ **Rien n'a été éprouvé sur un Synology réel** — ni Cont
proxy inversé de DSM, ni son certificat. Ce sont des gestes de DSM, pas du code, mais le
README doit continuer de le dire.
## Bootstrap réduit à son reboot (2026-08-22)
`index.html` chargeait `bootstrap.min.css`**1298 règles, 228 Ko** — alors qu'**aucune
classe Bootstrap n'apparaît dans le code Razor** (mesuré : zéro occurrence de `btn`,
`container`, `row`, `col`, `card`, `form-control`…).
⚠️ **Il n'était pas inutile pour autant, et c'est le piège.** Mesuré en désactivant la
feuille et en comparant les styles calculés : **124 éléments sur 124** changeaient. Ce
que Bootstrap apportait, `app.css` ne le pose pas :
| Sans lui | Conséquence |
|---|---|
| `box-sizing` retombe à `content-box` | tout calcul de largeur avec padding change |
| `line-height` retombe à `normal` | interlignage global |
| police retombe à `Arial` nu | `--bs-font-sans-serif` fournissait la pile |
| boutons en `appearance:auto`, **13,3 px** | boutons natifs du navigateur |
| `main` : **264,5 px → 240,5 px** de marge | 24 px de décalage réel |
**La solution n'était donc pas de le retirer mais de le réduire à ce qui servait** :
`bootstrap-reboot.min.css`, qui est exactement ce socle, livré séparément par Bootstrap.
⚠️ **Vérifié avant de trancher, pas après** : styles calculés comparés sur **12 routes et
785 éléments**, complet contre reboot — **zéro écart**. Puis en conditions réelles après
rechargement : 76 règles au lieu de 1298, `main` toujours à 264,5 px, aucun débordement
horizontal à 320, 375 et 1280 px, 628 tests au vert.
| | Complet | Reboot |
|---|---|---|
| Règles | 1298 | **76** |
| Brut | 228 Ko | **10 Ko** |
| Gzip (ce qui transite) | 31 Ko | **3,2 Ko** |
⚠️ **Ne pas croire que le poids était l'enjeu** : 31 Ko compressés sur une archive de
65 Mo, c'est négligeable, et c'est ce qui a failli faire garder le fichier tel quel. Le
vrai gain est de **ne plus embarquer 1222 règles qu'on n'utilise pas** — du bruit pour
qui reprend le projet, et une dépendance dont la surface ne correspondait à aucun usage.
⚠️ **Ne pas aller plus loin en supprimant le reboot** pour le réécrire dans `app.css` :
il porte les variables `--bs-*` dont dépendent ses propres règles, l'en-tête de licence
MIT, et surtout un comportement vérifié. Le remplacer par un reset maison rouvrirait la
question sur les 22 routes pour économiser 3 Ko.
⚠️ **43 autres fichiers de `lib/bootstrap/dist/` ont été supprimés au passage** : RTL,
grid, utilities, tous les JS, et ~6 Mo de *source maps*, qu'`index.html` n'a jamais
référencés mais qui partaient dans chaque release. L'archive passe de **69 à 64 Mo**
l'écart est bien moindre que sur disque (8,4 Mo), les *source maps* étant du texte qui se
compresse très bien. **Toujours mesurer sur l'archive, jamais sur le disque.**
## Historique du projet (pourquoi ces choix)
L'utilisateur a testé deux solutions existantes avant de se lancer dans un projet custom :
+8 -1
View File
@@ -6,7 +6,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MaBibli</title>
<base href="/" />
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<!-- Bootstrap REBOOT seul, pas Bootstrap complet. Aucune classe Bootstrap n'apparait
dans le code Razor : ce qui servait, c'etait uniquement le socle (box-sizing:
border-box, la police de base, l'interlignage, la normalisation des boutons et
des champs), qu'app.css ne pose pas lui-meme. Verifie le 2026-08-22 en comparant
les styles calcules sur 12 routes et 785 elements : ZERO ecart entre le complet
et le reboot. 228 Ko -> 10 Ko (31 Ko -> 3,2 Ko une fois compresse).
Voir CLAUDE.md, « Bootstrap reduit a son reboot ». -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap-reboot.min.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="MaBibli.Client.styles.css" rel="stylesheet" />
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long