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:
@@ -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 :
|
||||
|
||||
@@ -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
Reference in New Issue
Block a user