Извлечение только используемых стилей в HTML из таблицы стилей

Question

Я пытаюсь повысить производительность своего сайта, преодолев блокировку рендера css. Кажется, проблема только в одном файле, и это минимизированная таблица стилей начальной загрузки, которую я получаю из CDN. Я пробовал несколько разных подходов, но ничего не помогло. Я хотел бы иметь копию таблицы стилей Bootstrap CDN в моем проекте и отредактировать ее так, чтобы она содержала только те CSS-файлы, которые я сейчас использую на своем сайте. Есть ли способ сериализации вашего сайта и удаления любых стилей из таблицы стилей, которые не используются? Я читал о нескольких различных подходах, но большинство из них не работают в браузерах, кроме Chrome, и ломаются при нажатии медиазапросов в таблице стилей.

Answer 1

На github и npm есть несколько критических инструментов css. Самый большой из них, вероятно, https://github.com/addyosmani/critical - вы можете определить задачу сборки grunt для выполнения именно того, что вам нужно: открыть html-страницу и выяснить, какие стили используются, а затем создать таблицу стилей на основе этого,

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