Минификатор CSS
Минифицирует CSS в браузере.
Об этом инструменте
Минификатор убирает комментарии и лишние пробелы, чтобы отдаваемый браузеру CSS стал компактнее. Инструмент удобен для быстрой проверки: в production-сборке минификацию выполняет бандлер.
Как пользоваться
Вставьте читаемый CSS, запустите минификацию и сравните размер до и после. Итоговый артефакт релиза по-прежнему собирайте своей сборочной цепочкой. Так разница видна ещё до замера во вкладке сети.
Пример
В примере есть комментарий, который минификация удаляет.
Ввод
.hero {
/* homepage band */
padding: 4rem 1.5rem;
background: #0f172a;
color: #e2e8f0;
}Вывод
.hero{padding:4rem 1.5rem;background:#0f172a;color:#e2e8f0}Совет
Не оставляйте минифицированный файл единственным источником, отформатированный оригинал должен храниться в репозитории.
Полезно знать
Насколько уменьшится мой CSS?
Зависит от количества пробелов и комментариев: сильнее всего сжимается CSS с комментариями и отступами. Инструмент убирает только пробелы и комментарии; минификатор в сборке умеет ещё объединять и сокращать правила, поэтому для релиза используйте его.
Может ли минификация сломать стили?
Пробелы вокруг селекторов-потомков вроде «nav :first-child» сохраняются, иначе смысл изменился бы. Комментарии удаляются, включая лицензионные баннеры.