Акысыз CSS кыскартуучу жана оңдоочу

Бул кантип иштейт

Бул курал толугу менен JavaScript'те курулган кол менен жазылган, нөл-көз карандылыктагы CSS токенизаторун колдонот — тышкы китепканалар жок, серверге чалуу жок. Токенизатор ар бир символду каалаган трансформация колдонуудан мурун код, комментарий, чапталган саб же url() маани катары классификациялайт, бул боштук эрежелеринин саб мазмунун, маалымат URI'лерин же calc() туюнтмаларын бузушуна жол бербейт.

1. 1
   Токенизация өтүшү

   Киргизилген CSS символ-боюнча-символ сканерленет жана терилген токендерге бөлүнөт: чийки код бөлүктөрү, /* ... */ комментарийлер, чапталган саптар (качыруу ырааттуулугун сактап) жана url(...) блоктору. Бул кийинки кадамдагы трансформациялар чын гана CSS синтаксисине тийишин камсыздайт — эч качан сап литералынын мазмунуна же маалымат URI'сине эмес.
2. 2
   Кыскартуу же кооздоо

   Кыскартуу режиминде, кадимки комментарийлер алынат (/*! license */ комментарийлери сакталат), код токендериндеги боштук агымдары бир боштукка кысылат, жана { } : ; , > ~ айланасындагы тыныш-белгиге-жанаша боштук алынат. + жана - айланасындагы боштуктар calc() туюнтмаларын бузбоо үчүн атайылап тийилбей калтырылат. Кооздоо режиминде, код адегенде таза базага кыскартылат, андан кийин property: value чекиттерин a:hover сыяктуу тандагыч чекиттеринен айырмалоо үчүн эки-боштуктук тереңдик байкоо жана деклара-чекит аныктоо менен кайра токенделип, кайра четтетилет.
3. 3
   Gzip өлчөм болжолу

   Чыгууну жаратканда кийин, браузердин нативдик CompressionStream API'си натыйжаны gzip менен кысуу жана натыйжалуу байт санын өлчөө үчүн колдонулат. Бул gzip кысуусу бар веб-сервер тармак аркылуу жибере турганына дал келген реалдуу жиберүү-өлчөм болжолун берет.
4. 4
   Көчүрүү же жүктөп алуу

   Иштетилген CSS Clipboard API аркылуу алмашуу буферине жазылат, же text/css MIME түрү менен Blob колдонуп styles.min.css (кыскартуу режими) же styles.css (кооздоо режими) катары жүктөлөт. Өлчөм азайуу пайызы терип жатканда тирүү көрсөтүлөт.

Байланыштуу куралдар