Удалить неиспользуемый CSS на лету?

Question

Проблема в том, что многие из моих страниц загружаются [с помощью GooglePageSpeed] и, кажется, загружают много неиспользуемого CSS.

Если я пытаюсь разделить CSS - тогда я получаю сообщение об ошибке «слишком много CSS-файлов». Мне интересно, есть ли какие-нибудь плагины jquery [или другие], которые могут отрисовывать только CSS для загружаемой страницы и игнорировать остальные?

Это похоже на динамический CSS-чейнджер? Это действительно поможет ....

Answer 1

Я бы посоветовал вам перейти на Dust-Me Selector (дополнение Firefox), чтобы проверить неиспользуемый CSS и удалить его для определенных страниц. Обратите внимание, что это не то, что позволяет удалять на лету.

Answer 2

Если вы не отправляете сотни килобайт CSS, тогда это не должно иметь большого значения.

Динамический CSS-чейнджер разрушит кеширующую способность браузера, что приведет к более высокой передаче.

Answer 3

Существует действительно удобный плагин для Grunt под названием UnCSS. Он автоматически удалит неиспользуемый CSS на лету. Проверьте эту ссылку для получения дополнительной информации:

Автоматическое удаление неиспользуемого CSS

Answer 4

Мне кажется, что оптимизировать ваш CSS на лету будет плохой практикой. Ни на стороне сервера, ни на стороне клиента, поскольку это снизит производительность браузера сервера / пользователя.

Если размер CSS так важен для вас, лучше было бы вручную создать несколько предварительно оптимизированных таблиц стилей для каждого глобального типа страниц, используемых в вашем веб-приложении, и переключаться между ними. Для этого есть еще один полезный аддон для Firefox Firefox, названный CSS Coverage . Он позволяет сканировать несколько страниц вашего сайта, чтобы увидеть, какие правила CSS фактически используются на вашем сайте для каждой страницы или для многих.

Answer 5

Эшафот может помочь. Он не удаляет то, что вам не нужно, но компилирует его в один маленький файл.

Для удаления неиспользуемого CSS потребуется JavaScript, который будет работать медленнее, чем решение, описанное выше.