de Gajus Kuizinas

Reducerea dimensiunii pachetului CSS cu 70% prin tăierea numelor clasei și utilizarea izolării domeniului

La fel cum o face Google

La începutul acestui an am renunțat la consultanță și mi-am propus să construiesc GO2CINEMA – Mod rapid, simplu și sigur de a rezerva bilete la cinematograf în Marea Britanie. Am făcut o treabă splendidă făcând-o rapid, simplu și sigur. Undeva pe parcurs, am devenit obsedat de optimizarea critică a traseului de redare ⚡️.

Am rezolvat pre-redarea HTML folosind ūsus. ūsus redă codul HTML al aplicațiilor cu o singură pagină (SPA) și aliniază CSS-ul folosit pentru redarea paginii. Cu toate acestea, nu mi-a plăcut includerea a 70 KB în fiecare document HTML, în special. cea mai mare parte fiind numele claselor CSS.

La fel cum o face Google

Te-ai uitat vreodată în codul sursă al https://www.google.com/? Primul lucru pe care îl veți observa este că numele claselor CSS nu au mai mult de câteva caractere.

Reducerea dimensiunii pachetului CSS cu 70 prin taierea numelor clasei
google.com HTML

Dar cum?

Neajunsurile minifierelor CSS

Există un lucru pe care un minifier nu îl poate face – schimba numele selectorului. Acest lucru se datorează faptului că un minifier CSS nu controlează ieșirea HTML. Între timp, numele CSS pot deveni lungi.

Dacă utilizați module CSS, este probabil ca modulele dvs. CSS să includă numele fișierului de foaie de stil, numele identificatorului local și un hash aleatoriu. Șablonul cu numele clasei este descris folosind css-loader localIdentName configurație, de ex [name]___[local]___[hash:base64:5]. Prin urmare, un nume de clasă generat va arăta cam așa .MovieView___movie-title___yvKVV ; dacă vă plac numele descriptive, se poate prelungi mult mai mult, de ex .MovieView___movie-description-with-summary-paragraph___yvKVV .

Redenumirea numelor claselor CSS la momentul compilării

Cu toate acestea, dacă utilizați webpack și babel-plugin-react-css-modules, ai noroc? – puteți redenumi numele claselor în momentul compilării folosind css-încărcător getLocalIdent configurație și echivalentul babel-plugin-react-css-modules generateScopedName configurare.

Interesant generateScopedName este că aceeași instanță a funcției poate fi utilizată pentru procesul de construire Babel și webpack:

Făcând numele scurte

Mulțumită babel-plugin-react-css-modules și css-loader împărtășind aceeași logică pentru a genera numele claselor CSS, putem schimba numele claselor în ceea ce ne place, chiar și un hash aleatoriu. Cu toate acestea, în loc de un hash aleatoriu, am vrut cele mai scurte nume de clasă posibile.

Pentru a genera cele mai scurte nume de clase, am creat un index de nume de clasă și am folosit incstr modul pentru a genera ID-uri incrementale pentru fiecare intrare din index.

Acest lucru garantează nume de clasă scurte și unice. Acum, în loc de .MovieView___movie-title___yvKVV și .MovieView___movie-description-with-summary-paragraph___yvKVV numele claselor noastre au devenit .a_a, .b_a, etc.

Acest lucru sa redus GO2CINEMA Dimensiunea pachetului CSS de la 140 KB la 53 KB.

Folosind izolarea Scope pentru a reduce în continuare dimensiunea pachetului

Există un motiv bun pentru care am adăugat _ în numele clasei CSS separând numele componentei și numele identificatorului local – distincția este utilă pentru minificare.

csso (Minifier CSS) are scopuri configurare. Domeniile de aplicare definesc liste de nume de clase care sunt utilizate exclusiv pe anumite marcaje, adică selectoarele din diferite domenii nu se potrivesc cu același element. Aceste informații permit optimizatorului să mute regulile mai agresive.

Pentru a valorifica acest lucru, utilizați csso-webpack-plugin pentru a procesa post pachetul CSS:

Acest lucru sa redus GO2CINEMA Dimensiunea pachetului CSS de la 53 KB la 47 KB.

Merita?

Primul argument împotriva unei astfel de reduceri este că algoritmii de compresie o vor face pentru dvs. GO2CINEMA CSS bundle comprimat folosind Brotli algoritmul economisește doar 1 KB comparativ cu pachetul original cu numele claselor lungi.

Pe de altă parte, configurarea acestei reduceri este o investiție unică și reduce dimensiunea documentului care trebuie analizat. Are alte avantaje, cum ar fi descurajarea scapatorilor care se bazează pe numele clasei CSS pentru a naviga sau potrivirea accidentală a selectorilor CSS ai blocatorului de anunțuri liste negre.

Între timp, puteți vedea o demonstrație a acestei reduceri folosită pe paginile filmului și locului de desfășurare GO2CINEMA, de ex

Mă puteți ajuta cu GO2CINEMA?

GO2CINEMA este copilul meu. Îmi place să lucrez la asta? Cu toate acestea, este primul meu startup din acest deceniu și sunt multe lucruri cu care am nevoie de ajutor.

Dacă puteți oferi feedback, un sfat SEO, un sfat de afaceri, cunoașteți un investitor înger, cunoașteți pe cineva despre care poate scrie un articol GO2CINEMA, faceți un tweet, invitați-mă la o conferință, la o emisiune radio etc. sau doriți doar să vă exprim sprijinul / curiozitatea și să spuneți „Bună!”, trimiteți-mi un e-mail la gajus@gajus.com sau DM prin Twitter, https://twitter.com/kuizinas.

Îți place să citești, îmi place să scriu

Îmi poți susține lucru open-source iar eu scriind articole tehnice prin Cumpără-mi o cafea și Patreon. Veți avea recunoștința mea eternă?