Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы?

Question

[Vkok]

Здравствуйте, коллеги.

Хотелось бы уменьшить размеры CSS. Подскажите пожалуйста как это можно сделать). Спасибо. Владимир.

Comments

[Flint_Hakaari]

Копайте в сторону минификаторов CSS.

Answer 1

[Антон Антон]

Может быть это поможет: https://github.com/FullHuman/purgecss

Answer 2

[coderxx]

https://www.npmjs.com/package/gulp-clean-css

Answer 3

[Владимир Проскурин]

Нельзя автоматически делать, т.к. вы не сможете анализируя только html код, удалить неиспользуемые классы, т.к. вероятно, эти классы будут добавляться через js, или использоваться на других страницах. Так можно лишнее удалить.
Нужно вручную, при помощи инструментов. В хроме в devtools есть крутой инструмент code coverage, заходите на страницу, жмете запись, и он показывает, какие строки в css/js были выполнены (использованы в случае css). Заходите в предлагаемые файлы, и там каждый неиспользуемый на данной странице css блок, будет выделен красным цветом, читаете его и смотрите, точно ли вы не где не могли его использовать.
Подробнее тут
https://developers.google.com/web/updates/2017/04/...
https://medium.com/devschacht/using-the-chrome-dev...

Comments

[Rustam Bainazarov]

Солидарен с ответом. Отговаривал одних товарищей удалять якобы неиспользуемый CSS с сайта. Удалили.

В итоге они заманались выискивать ошибки и делать механизмы подгрузки доп. стилей как на разных страницах, так и при динамическом добавлении DOM.

Вернули всё обратно в итоге.