как минимизировать по-настоящему CSS и почему purify не подходит

результаты работы по исключению не используемых классов из CSS файла

Когда я пишу сайты я пользуюсь CSS SCSS(SASS) — мне больше нравится синтаксис SCSS. Потом естественно при записи Gulp отслеживает изменения *.scss файлов и генерирует CSS. Конечно при генерации я делаю циклы и миксины, чтобы было всё удобное под рукой. Отсюда и минус — в одном проекте классы нужны, в другом нет, а пишу я универсальные, чтобы использовать повторно. И даже в рамках одного проекта бывает что пока подбираешь верстку используешь то одни классы, то другие, но все они генерируются по одному алгоритму.



Когда же я выкладываю сайт на хостинг из сгенерированного CSS и framework’ов нужны далеко не все стили. Значит если не чистить CSS это в 5-6 а может и 10 раза больший код, чем нужен и это дополнительное время загрузки страниц.

Тогда я взял purify-css и все бы хорошо если бы классы все назывались по-разному, но когда есть классы w-70vw (width: 70vw) и подобные ему от 0 до 100 vw purify-css буксует и не удаляет классы, если находит использование хотя бы одного из подмножества классов, например, если находит в html файле использование класса  w-70vw, то оставит все классы  w-0vw —  w-100vw, даже если они не используются нигде.

Поэтому мне не подходит purify-css и я не могу рекомендовать его для проектов.

Каков же выход? Включить в свой проект uncss

подключение gulp-uncss

использование gulp-uncss

gulp-uncss — он корректно обрабатывает подмножества классов и не оставляет не используемых классов. Да, похоже он не умеет искать ссылки на классы в JS, но можно и самому написать или добавить классы в исключения. Да маски он конечно же тоже поддерживает.

На оф. сайте рекомендуют использовать вместо gulp-uncss  — uncss т.к. проект устарел. Не знаю так ли это, но на момент написания поста я поставил себе  gulp-uncss и он замечательным образом из css в 29,4кб сделал мне CSS 6,23кб и это без минификации! (написания CSS в одну строку без лишних пробелов, комментариев и переводов строки). 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *