Nemokamas CSS Minifikatorius: Suglaudinti ir Optimizuoti CSS Kodą Internete

Kas yra CSS minifikatorius?

CSS minifikatorius – tai įrankis, kuris sumažina CSS (pakopinių stilių lapų) failą pašalindamas simbolius, kurių naršyklėms nereikia. Jis pašalina komentarus, perteklinius tarpus ir eilučių lūžius, taip pat sutrumpina kelis dažnus kodo šablonus, nekeisdamas puslapio išvaizdos. Gautas mažesnis failas naršyklei atsisiunčiamas ir apdorojamas greičiau.

Kaip veikia CSS minifikavimas

Saityno kūrėjai CSS rašo su komentarais, įtraukomis ir tuščiomis eilutėmis, nes taip kodą lengviau skaityti ir redaguoti. Naršyklės viso šio formatavimo nepaiso. Minifikatorius jį pašalina kartu su keliais kitais baitais, neturinčiais įtakos vaizdui, ir palieka glaustą failą, skirtą naudoti gamybinėje aplinkoje, o ne redaguoti.

Šis įrankis atlieka šiuos pakeitimus:

• Pašalina komentarus. Kiekvienas blokas /* ... */ ištrinamas.
• Sutraukia tarpus. Tarp taisyklių esantys tarpų, tabuliacijos simbolių ir eilučių lūžių deriniai pašalinami arba pakeičiami vienu tarpu, kai tarpas yra prasmingas (pavyzdžiui, tarp .parent ir .child palikuonio selektoriuje).
• Pašalina tarpus aplink skyrybos ženklus. Tarpai šalia {, }, :, ; ir , pašalinami.
• Pašalina perteklinius kabliataškius. Pasikartojantys kabliataškiai sutraukiami į vieną, o paskutinis kabliataškis prieš uždarantį } pašalinamas.
• Sutrumpina šešioliktaines spalvas. Šešių skaitmenų spalva, pavyzdžiui, #ffffff, tampa #fff, kai kiekvienoje poroje abu skaitmenys sutampa (raudonos, žalios ir mėlynos spalvų kanalų). Aštuonių skaitmenų spalva su alfa kanalu, pavyzdžiui, #ffaa00cc, sutrumpinama taip pat, kai sutampa visos keturios poros.
• Pašalina vienetą iš nulinio ilgio reikšmių. 0px, 0em ir 0rem tampa 0. Procentinės reikšmės nekeičiamos, nes 0% ne visada galima pakeisti paprasta 0 reikšme (pavyzdžiui, naudojant flex-basis arba @keyframes žingsnyje).
• Pašalina nulinį sveikosios dalies skaitmenį dešimtainėse trupmenose. 0.5 tampa .5.

Kad failas nebūtų sugadintas, įrankis nekeičia trijų rūšių turinio: teksto kabutėse, reikšmės nekabutėse esančiame url() ir matematinių funkcijų, tokių kaip calc(), clamp(), min() ir max(), turinio. Tarpai calc(100% - 20px) viduje yra svarbūs naršyklei, todėl įrankis juos išsaugo tiksliai.

Įrankis nejungia pasikartojančių selektorių, nešalina tuščių taisyklių blokų ir nepaverčia rgb() spalvų šešioliktainėmis. Tai tinkami optimizavimo būdai, kuriuos taiko kiti įrankiai, tačiau šis minifikatorius apsiriboja pirmiau išvardytais pakeitimais.

Sumažėjimo procento formulė

Įrankis pateikia, kiek procentais sumažėjo failas:

Abu ilgiai skaičiuojami simboliais. Rezultatas suapvalinamas iki dviejų skaitmenų po kablelio.

Išspręstas pavyzdys

Pradinis CSS (193 simboliai):

Minimizuota išvestis (129 simboliai):

Taikant formulę: (193 − 129) / 193 × 100 = 33,16 %. Komentaras pašalintas, įtraukos ir eilučių lūžiai pašalinti, 0px tapo 0, o #ffffff/#000000 tapo #fff/#000.

Tikslus procentas priklauso nuo įvesties. Tvarkingai parašytas CSS, kuriame mažai komentarų, sumažėja mažiau. Gausiai komentuotas ir giliai įtrauktas CSS gali sumažėti labiau. Naudojant šį įrankį minimizuoti stilių lapai paprastai sumažėja maždaug nuo 20 % iki 40 %.

Kaip naudoti šį įrankį

1. Įklijuokite CSS kodą į kairėje esantį įvesties lauką.
2. Dešinėje automatiškai rodoma minifikuota versija, todėl nereikia spausti jokio mygtuko.
3. Patikrinkite virš rezultato rodomą sumažėjimo procentą.
4. Pasirinkite „Copy to Clipboard“, kad nukopijuotumėte minimizuotą CSS, tada įklijuokite jį į projekto failą.
5. Pasirinkite „Clear“, kad išvalytumėte abu laukus ir pradėtumėte iš naujo.

Tai, kas įvedama į įrankį, nesiunčiama į serverį; minifikavimas atliekamas naršyklėje.

Kada minimizuoti CSS

Kūrimo komandos dažnai minimizuoja CSS kaip kūrimo proceso etapą, naudodamos tokius įrankius kaip „Webpack“ ar npm scenarijus, todėl pakeitimas automatiškai atliekamas prieš kiekvieną diegimą. Skaitomas, komentuotas pradinis failas lieka versijų valdymo sistemoje; minimizuojama tik gamybinė versija. Dažnos minimizuoto CSS naudojimo sritys:

• Didelės svetainės, pavyzdžiui, internetinės parduotuvės, kuriose mažesnis stilių lapas reiškia greičiau įkeliamą puslapį.
• Vieno puslapio taikomosios programos, sukurtos naudojant tokias sistemas kaip „React“ ar „Vue“, kuriose CSS pateikiamas kartu su „JavaScript“.
• Mobiliesiems įrenginiams skirti saityno puslapiai, kurių naudotojai dažniau naudojasi lėtesniu ryšiu.
• HTML el. laiškai, kuriems dažnai taikomi griežti dydžio apribojimai.

CSS minifikavimas ir puslapio sparta

Mažesnis CSS failas atsisiunčiamas ir apdorojamas greičiau, todėl gali sutrumpėti laikas, kol puslapis tampa matomas. „Google“ yra nurodžiusi, kad puslapio sparta yra vienas iš paieškos reitingavimui naudojamų signalų, todėl greitesnis puslapis gali būti vienas iš nedidelių daugelio veiksnių, lemiančių svetainės rezultatus paieškoje. Vien minifikavimas negarantuoja reitingo pokyčio; tai tik vienas iš kelių optimizavimo būdų, greta vaizdų glaudinimo ir serverio atsako laiko gerinimo.

CSS minifikatorius ir CSS gražintuvas

Minifikatorius suspaudžia kodą naudojimui gamybinėje aplinkoje. Gražintuvas atlieka atvirkštinį veiksmą: paima suspaustą CSS ir iš naujo suformatuoja jį, pridėdamas įtraukas bei eilučių lūžius, kad žmogus galėtų jį perskaityti. Gražintuvas negali atkurti komentarų ar pradinių kintamųjų pavadinimų, pašalintų minifikuojant, nes ištrynus ši informacija prarandama.

Dažnai užduodami klausimai

Kiek CSS sumažėja po minifikavimo? Naudojant šį įrankį, paprastai nuo 20 % iki 40 %, priklausomai nuo komentarų, tuščių eilučių ir įtraukų kiekio pradiniame faile. Failas, kuriame iš pradžių buvo mažai formatavimo, sumažės mažiau.

Ar CSS minifikavimas pakeičia puslapio išvaizdą? Ne. Minifikavimas pašalina tik simbolius, kurių naršyklės nepaiso, pavyzdžiui, komentarus ir perteklinius tarpus, taip pat perrašo kelias lygiavertes reikšmes (pvz., #ffffff į #fff). Sugeneruotas puslapis lieka toks pats.

Ar CSS reikėtų minifikuoti kūrimo metu? Ne. Rašydami ir derindami kodą naudokite skaitomą, komentuotą versiją. Minifikuokite tik kopiją, kuri siunčiama į gamybinį serverį, paprastai kaip automatinį kūrimo proceso etapą.

Ar galima iš minimizuoto CSS atkurti pradinį failą? Gražintuvas gali iš naujo suformatuoti minimizuotą CSS, pridėdamas įtraukas, tačiau negali atkurti ištrintų komentarų ar aprašomųjų pavadinimų, kurie nebuvo išsaugoti minimizuotoje versijoje. Saugokite pradinį failą.

Ar šis įrankis paverčia rgb() spalvas šešioliktainėmis arba sujungia pasikartojančius selektorius? Ne. Jis sutrumpina šešioliktaines spalvas ir pašalina nereikalingus simbolius, tačiau neperrašo rgb()/hsl() reikšmių ir nejungia pasikartojančių selektorių. Kai kurie kiti minifikatoriai atlieka šiuos papildomus veiksmus.

Ar minifikavimas yra tas pats, kas glaudinimas naudojant „gzip“? Ne. Minifikavimas pašalina nereikalingus simbolius iš paties pradinio kodo. „Gzip“ (arba „Brotli“) glaudinimą taiko saityno serveris, siųsdamas failą, naudodamas atskirą algoritmą. Naudojant abu būdus kartu, tinkle perduodamas mažiausias failas.