Перейти к содержимому
ГалоўнаяГайды і інструкцыіАптымізацыя CSS і тэсціраванне рэгулярных выразаў для верстальшчыка

Аптымізацыя CSS і тэсціраванне рэгулярных выразаў для верстальшчыка

Час чытання: 1 хв

Як мініфікаваць CSS для паскарэння сайта і тэсціраваць рэгулярныя выразы перад выкарыстаннем у кодзе. Бясплатныя онлайн-інструменты без устаноўкі.

У працэсе вёрсткі і дапрацоўкі сайта ёсць дзве задачы, якія ўзнікаюць рэгулярна: сціснуць CSS-файл, каб старонка загружалася хутчэй, і праверыць рэгулярны выраз, перш чым устаўляць яго ў код продакшну.

Мініфікацыя CSS

CSS Minifier сціскае код, выдаляючы лішнія прабелы, пераносы радкоў і каментарыі — без змены стыляў. Файл пасля мініфікацыі можа паменшыцца на 20–40% ад зыходнага памеру, што непасрэдна ўплывае на хуткасць загрузкі старонкі. Дастаткова ўставіць код ці загрузіць файл — і спампаваць мініфікаваную версію.

Тэсціраванне рэгулярных выразаў

Regex Tester паказвае супадзенні ў тэксце ў рэальным часе: ўводзіце рэгулярны выраз і тэставы радок — сэрвіс падсвятляе ўсе супадзенні і паказвае групы захопу. Гэта пазбаўляе ад неабходнасці пісаць часовыя HTML-старонкі з console.log кожны раз, калі трэба праверыць выраз.

Чаму гэта зручней за кансоль браўзера

У адрозненне ад кансолі распрацоўшчыка, Regex Tester паказвае ўсе супадзенні адразу, а не па адным, і дазваляе візуальна пераканацца, што выраз не захоплівае лішняга. А CSS Minifier дае дакладнае ўяўленне пра тое, колькі байт атрымалася зэканоміць — ажно да працэнта сціску.

Абодва інструменты працуюць лакальна ў браўзеры, без адпраўкі кода на сервер — вашы зыходнікі не пакідаюць прыладу.

Важна: усе файлы апрацоўваюцца ў браўзеры і не адпраўляюцца на сервер — бяспечна для канфідэнцыйных малюнкаў.