නොමිලේ CSS Minifier සහ Beautifier

එය ක්‍රියා කරන්නේ කෙසේද

මෙම මෙවලම JavaScript වලින් සම්පූර්ණයෙන්ම ගොඩනගා ඇති අතින් ලියන ලද, zero-dependency CSS tokenizer එකක් භාවිතා කරයි — බාහිර පුස්තකාල, සර්වර ඇමතුම් නැත. tokenizer එක ඕනෑම පරිවර්තනයක් යෙදීමට පෙර සෑම අක්ෂරයක්ම code, comment, quoted string, හෝ url() අගය ලෙස වර්ගීකරණය කරයි, එය whitespace නීති string අන්තර්ගතයන්, data URIs, හෝ calc() expressions විනාශ කිරීම වළක්වයි.

1. 1
   ටෝකනීකරණ අවපාරය

   ආදාන CSS එක character-by-character scan කර typed tokens වලට බෙදේ: raw code segments, /* ... */ comments, quoted strings (escape sequences ආරක්ෂා කරමින්), සහ url(...) blocks. මෙය ඊළඟ පියවරේ පරිවර්තන සැබෑ CSS syntax එකට පමණක් ස්පර්ශ කරන බව සහතික කරයි — string literal එකක හෝ data URI එකක අන්තර්ගතයට කිසි විටෙක නොවේ.
2. 2
   Minification හෝ beautification

   Minify ප්‍රකාරයේදී, සාමාන්‍ය comments ඉවත් කෙරේ (/*! license */ comments තබාගනී), code tokens වල whitespace runs තනි spaces වලට හකුළනු ලැබේ, { } : ; , > ~ අවට punctuation-adjacent whitespace ඉවත් කෙරේ. calc() expressions බිඳ නොවැටෙන ලෙස + සහ - වටා spaces හිතාමතාම නොවෙනස්ව තබනු ලැබේ. Beautify ප්‍රකාරයේදී, කේතය ප්‍රථමයෙන් පිරිසිදු baseline එකකට minify කර, පසුව property: value colons selector colons (a:hover වැනි) වලින් වෙන් කිරීමට space-දෙකේ depth tracking සහ declaration-colon detection සමඟ නැවත-tokenize කර නැවත-indent කෙරේ.
3. 3
   Gzip ප්‍රමාණ ඇස්තමේන්තුව

   ප්‍රතිදානය නිපදවීමෙන් පසු, gzip සමඟ ප්‍රතිඵලය සම්පීඩනය කර ලැබෙන byte ගණන මැනීමට බ්‍රවුසරයේ native CompressionStream API එක භාවිතා කෙරේ. gzip සම්පීඩනය සහිත web server එකක් network එක හරහා යවන දෙයට ගැලපෙන යථාර්ථවත් transfer-size ඇස්තමේන්තුවක් මෙයින් ලැබේ.
4. 4
   පිටපත් කරන්න හෝ බාගත කරන්න

   සකසන ලද CSS Clipboard API හරහා clipboard වෙත ලියනු ලබන, හෝ MIME type text/css සහිත Blob එකක් භාවිතයෙන් styles.min.css (minify ප්‍රකාරය) හෝ styles.css (beautify ප්‍රකාරය) ලෙස බාගත කෙරේ. ඔබ ටයිප් කරන විටම ප්‍රමාණ අඩුවීමේ ප්‍රතිශතය සජීවීව පෙන්වයි.

සම්බන්ධ මෙවලම්