Pāriet uz saturu
🛠️
Whiz Tools

Bezmaksas CSS Minificētājs: Kompresēt un Optimizēt CSS Kodu Tiešsaistē

Momentāli minificēt CSS kodu un samazināt faila izmēru līdz pat 40%. Bezmaksas tiešsaistes CSS minificētājs noņem tukšās vietas, komentārus un optimizē sintaksi ātrākai vietnes veiktspējai.

CSS Minificētājs

Momentāni minificēt CSS kodu, lai samazinātu faila izmēru līdz pat 40% un uzlabotu vietnes ielādes ātrumu.

0 rakstzīmes
0 rakstzīmes

Par CSS Minifikāciju

CSS minifikācija noņem nevajadzīgās rakstzīmes no CSS failiem, nemainot funkcionalitāti, samazinot faila izmēru un uzlabojot vietnes veiktspēju.

  • Noņem komentārus, tukšās vietas un rindu pārtraukumus
  • Likvidē nevajadzīgus semikolunus un nulles vienības
  • Optimizē krāsu vērtības un deklarācijas
  • Uzlabo lapas ielādes ātrumu un SEO rangu
Ielādes kalkulators...
📚

Dokumentācija

Kas ir CSS minifikators?

CSS minifikators ir rīks, kas samazina CSS (kaskādes stilu lapu) faila izmēru, izņemot rakstzīmes, kas pārlūkprogrammām nav vajadzīgas. Tas noņem komentārus, liekās atstarpes un rindu pārtraukumus, kā arī saīsina dažus bieži lietotus rakstus, nemainot lapas izskatu. Rezultātā tiek iegūts mazāks fails, ko pārlūkprogramma var ātrāk lejupielādēt un parsēt.

Kā darbojas CSS minifikācija

Tīmekļa izstrādātāji raksta CSS ar komentāriem, atkāpēm un tukšām rindām, jo tas atvieglo koda lasīšanu un rediģēšanu. Pārlūkprogrammas visu šo formatējumu ignorē. Minifikators to izdzēš kopā ar dažiem citiem baitiem, kam nav vizuāla mērķa, un atstāj kompaktu failu, kas paredzēts izmantošanai ražošanas vidē, nevis rediģēšanai.

Šis rīks piemēro šādas izmaiņas:

  • Noņem komentārus. Katrs /* ... */ bloks tiek izdzēsts.
  • Sakļauj atstarpes. Atstarpju, tabulāciju un rindu pārtraukumu virknes starp noteikumiem tiek samazinātas līdz nullei vai vienai atstarpei vietās, kur atstarpe ir nozīmīga, piemēram, starp .parent un .child pēcteča selektorā.
  • Noņem atstarpes ap pieturzīmēm. Atstarpes blakus rakstzīmēm {, }, :, ; un , tiek noņemtas.
  • Noņem liekos semikolus. Atkārtoti semikoli tiek sakļauti vienā, bet pēdējais semikols pirms aizverošās } figūriekavas tiek izdzēsts.
  • Saīsina heksadecimālās krāsas. Sešciparu krāsa, piemēram, #ffffff, kļūst par #fff, ja katrs ciparu pāris sakrīt (sarkanā, zaļā un zilā komponentē). Astoņciparu krāsa ar alfa komponenti, piemēram, #ffaa00cc, tiek saīsināta tādā pašā veidā, ja sakrīt visi četri pāri.
  • Noņem mērvienību no nulles garuma vērtībām. 0px, 0em un 0rem kļūst par 0. Procentu vērtības tiek saglabātas, jo 0% ne vienmēr ir aizstājams ar vienkāršu 0, piemēram, flex-basis vai @keyframes solī.
  • Noņem decimāldaļskaitļu sākuma nulli. 0.5 kļūst par .5.

Lai nepieļautu faila sabojāšanu, rīks nemaina trīs veidu saturu: tekstu pēdiņās, vērtību neietvertā url() iekšpusē un matemātisko funkciju, piemēram, calc(), clamp(), min() un max(), saturu. Atstarpēm calc(100% - 20px) iekšpusē ir nozīme pārlūkprogrammai, tāpēc rīks tās saglabā precīzi.

Rīks nesapludina dublētus selektorus, neizdzēš tukšus noteikumu blokus un nepārveido rgb() krāsas par heksadecimālām krāsām. Tie ir derīgi optimizācijas paņēmieni, ko veic citi rīki, bet šis minifikators koncentrējas uz iepriekš uzskaitītajām izmaiņām.

Samazinājuma procentuālā aprēķina formula

Rīks uzrāda, par cik procentiem faila izmērs ir samazinājies:

1reduction % = ((original length − minified length) / original length) × 100
2

Abi garumi tiek skaitīti rakstzīmēs. Rezultāts tiek noapaļots līdz divām zīmēm aiz komata.

Atrisināts piemērs

Sākotnējais CSS (193 rakstzīmes):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Minificētais rezultāts (129 rakstzīmes):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Izmantojot formulu: (193 − 129) / 193 × 100 = 33,16%. Komentārs ir noņemts, atkāpes un rindu pārtraukumi ir noņemti, 0px kļuva par 0, bet #ffffff/#000000 kļuva par #fff/#000.

Precīzais procentuālais rādītājs ir atkarīgs no ievades. Rūpīgi uzrakstīts CSS ar nedaudziem komentāriem samazinās mazāk. CSS ar daudziem komentāriem un dziļi iegultām atkāpēm var samazināties vairāk. Izmantojot šo rīku, tipiskas stilu lapas samazinās aptuveni par 20% līdz 40%.

Kā izmantot šo rīku

  1. Ielīmējiet CSS kodu ievades laukā kreisajā pusē.
  2. Minificētā versija automātiski parādās labajā pusē; nav jānospiež neviena poga.
  3. Pārbaudiet virs izvades parādīto samazinājuma procentuālo rādītāju.
  4. Izvēlieties “Copy to Clipboard”, lai kopētu minificēto CSS, un pēc tam ielīmējiet to projekta failā.
  5. Izvēlieties “Clear”, lai notīrītu abus laukus un sāktu no jauna.

Nekas no rīkā ievadītā netiek nosūtīts uz serveri; minifikācija notiek pārlūkprogrammā.

Kad minificēt CSS

Izstrādes komandas parasti minificē CSS kā būvēšanas procesa soli, izmantojot, piemēram, Webpack vai npm skriptus, lai izmaiņas notiktu automātiski pirms katras izvietošanas. Lasāmais fails ar komentāriem paliek versiju kontrolē; minificēta tiek tikai produkcijas būve. Bieži minificētu CSS izmanto:

  • Lielās tīmekļa vietnēs, piemēram, interneta veikalos, kur mazāka stilu lapa nozīmē ātrāku lapas ielādi.
  • Vienas lapas lietotnēs, kas veidotas ar tādiem ietvariem kā React vai Vue un kur CSS tiek apvienots ar JavaScript.
  • Mobilajās tīmekļa lapās, kur lietotāji biežāk izmanto lēnāku savienojumu.
  • HTML e-pastos, kuriem bieži ir stingri izmēra ierobežojumi.

CSS minifikācija un lapas ielādes ātrums

Mazāks CSS fails tiek lejupielādēts un parsēts ātrāk, kas var saīsināt laiku līdz lapas parādīšanai. Google ir norādījis, ka lapas ielādes ātrums ir viens no signāliem, ko izmanto meklēšanas rezultātu ranžēšanā, tāpēc ātrāka lapa var būt viens neliels faktors starp daudziem, kas ietekmē vietnes pozīciju meklēšanas rezultātos. Minifikācija pati par sevi negarantē pozīcijas maiņu; tā ir viena no vairākām optimizācijām līdzās attēlu saspiešanai un servera atbildes laikam.

CSS minifikators un CSS formatētājs

Minifikators saspiež kodu izmantošanai produkcijā. Formatētājs dara pretējo: tas paņem saspiestu CSS un pārformatē to ar atkāpēm un rindu pārtraukumiem, lai cilvēks to atkal varētu izlasīt. Formatētājs nevar atjaunot komentārus vai sākotnējos mainīgo nosaukumus, kas minifikācijas laikā tika noņemti, jo pēc izdzēšanas šī informācija vairs nav pieejama.

Biežāk uzdotie jautājumi

Par cik CSS samazinās pēc minifikācijas? Izmantojot šo rīku, parasti par 20% līdz 40% atkarībā no komentāru, tukšo rindu un atkāpju daudzuma sākotnējā failā. Fails, kurā jau sākotnēji ir maz formatējuma, samazinās mazāk.

Vai CSS minifikācija maina lapas izskatu? Nē. Minifikācija tikai noņem rakstzīmes, ko pārlūkprogrammas ignorē, piemēram, komentārus un liekās atstarpes, kā arī pārraksta dažas līdzvērtīgas vērtības, piemēram, #ffffff par #fff. Atveidotā lapa paliek nemainīga.

Vai CSS izstrādes laikā būtu jāminificē? Nē. Koda rakstīšanas un atkļūdošanas laikā saglabājiet lasāmo versiju ar komentāriem. Minificējiet tikai to kopiju, kas tiek nosūtīta uz ražošanas serveri, parasti kā automātisku būvēšanas procesa soli.

Vai minificēto CSS var pārvērst atpakaļ par sākotnējo failu? Formatētājs var pārformatēt minificētu CSS ar atkāpēm, bet tas nevar atgūt izdzēstos komentārus vai atjaunot aprakstošus nosaukumus, kas minificētajā versijā nekad nav bijuši. Saglabājiet sākotnējo avota failu.

Vai šis rīks pārveido rgb() krāsas par heksadecimālām krāsām vai sapludina dublētus selektorus? Nē. Tas saīsina heksadecimālās krāsas un noņem nevajadzīgās rakstzīmes, bet nepārraksta rgb()/hsl() vērtības un nesapludina atkārtotus selektorus. Daži citi minifikatori veic arī šīs papildu darbības.

Vai minifikācija ir tas pats, kas gzip saspiešana? Nē. Minifikācija noņem nevajadzīgās rakstzīmes no paša avota koda. Gzip (vai Brotli) saspiešanu tīmekļa serveris veic atsevišķi, kad fails tiek nosūtīts, izmantojot citu algoritmu. Abu paņēmienu izmantošana kopā nodrošina vismazāko failu tīklā.