Как закэшировать css стили?

Question

[Александр Вербицкий]

В папке web/css, у меня, куча файлов с большим количеством стилей в каждом файле.

Какие-то стили нужны, какие-то просто висят без дела.

Вопрос, возможно ли как-то, выдернуть из всех этих файлов только используемые стили???

Например зашел я на страницу, а он хоп, и в отдельную папку (например cach/css) сохранил файл, с теми стилями которые были на данной странице... А потом просто их склеить, и получить один файл.

Answer 1

[Anton Mashletov]

А как комп определит какие стили используемые? Это довольно сложная задача: стили наследуются, добавляются динамически с помощью js.

Лишнее это. Используйте webpack / gulp, чтобы собрать все в 1 min файл и этот файл будет закеширован браузером.

Answer 2

[Максим Тимофеев]

Вот в чем Ваша ошибка:
на каждой странице свой набор нужных css. Можно сделать под каждую только нужные и кормить браузеру нужный css файл. Но так как браузеры кешируют ресурсы, такие как css, то оказывается, что это менее оптимально. 1 закешированный файл со всем css чаще более быстро работает и сокращает запросы к серверу, чем куча мелких, но "требующих себя закачать".
Много есть действительно разумных вариантов оптимизации и можно книгу написать (критический css + асинхронно остальное и т.д.). Но если коротко:
смотрите в сторону gulp, объединения и минификации css, а не сепарации.

Comments

[Александр Вербицкий]

Так я и хочу объединить в один файл, но там так много неиспользуемых или повторяющихся классов... Вот и хочу как то убрать лишнее

[Максим Тимофеев]

Александр Вербицкий, очень сложно будет 100% отделить зерна от плевел. А откуда там "неиспользуемых"? Кстати gulp (не он сам конечно) " повторяющихся" не повторит.

[Александр Вербицкий]

Скачал bootstrap шаблон, переделал его уже полностью, и многие классы в css уже и не нужны. Ну и плюс yii подключает свой bootstrap.css и многие классы в style.css и других .css от данного шаблона содержат классы из bootstrap.css.

C gulp еще не сталкивался... Посижу поразбираюсь.
А вкратце можете объяснить, для чего он? И чем поможет в данной ситуации?