Как очистить ксс в 34 от ненужных файлов
Обновлено: 05.07.2024
От автора: не секрет, что более компактные сайты работают быстрее, чем раздутые. Не позволяйте ненужным стилям CSS тормозить ваши веб-проекты; используйте инструменты и методы, описанные ниже, чтобы уменьшить CSS и улучшить общую производительность веб-сайта.
Что такое неиспользуемый CSS?
Независимо от того, насколько вы опытный разработчик, есть большая вероятность того, что ваш сайт содержит CSS, который не влияет на текущие элементы страницы. Например, такие фреймворки, как Bootstrap, поставляются с десятками стилей CSS, которые вам, вероятно, не нужны. Если вы добавили во время разработки функцию и позже удалили ее, все равно в таблицах стилей могут остаться правила, связанные с этой функцией. Неиспользуемыйй CSS просто добавляет мертвый вес вашим приложениям и способствует увеличению размера веб-страницы , поэтому вам нужно обеспечить, чтобы у вас было как можно меньше ненужного кода.
Почему нужно удалить неиспользуемый CSS?
Как удалить неиспользуемый CSS вручную
Если вы используете Chrome, на вкладке DevTools есть удобный инструмент, который позволяет видеть, какой код выполняется на странице, а какой нет. Чтобы получить доступ к этому инструменту, выполните следующие действия:
Откройте Chrome DevTools
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Откройте командное меню с помощью: cmd + shift + p
Введите «Охват» и выберите опцию «Показать охват»
Любой CSS, который помечен сплошной зеленой чертой, означает, что код был выполнен. Сплошная красная черта означает, что код не выполняется. Строка кода, которая является красной и зеленой, означает, что выполняется только некоторый код в этой строке.
Просто потому, что стиль не используется на одной странице, не означает, что он не используется в другом месте, поэтому вы должны проверить несколько страниц на сайте и отследить, какие правила продолжают отображаться в списке неиспользуемых. Вы можете сделать это, скопировав и сохранив результаты каждой проверки в документе Таблиц Google. Правила, которые повторяются, вероятно, могут быть безопасно удалены.
Инструменты для удаления неиспользуемого CSS
У большинства разработчиков есть, чем заняться, кроме как удалять неиспользуемые правила CSS одно за другим. Вот почему существует множество инструментов, предназначенных для автоматизации процесса. Ниже приводится обзор самых популярных инструментов, предназначенных для того, чтобы помочь веб-разработчикам удалить неиспользуемый CSS из своих веб-проектов.
1. UnusedCSS
Простое название говорит об удобстве использования этой программы. Просто укажите URL-адрес своего сайта в UnusedCSS, и все остальное он сделает сам. Помимо определения и удаления неиспользуемых правил CSS , он сообщает вам, сколько памяти вы сэкономили. Вы можете попробовать UnusedCSS бесплатно, но, чтобы загрузить очищенные CSS-файлы, вам нужно приобрести месячное членство. Premium-члены могут планировать автоматическую оптимизацию CSS и получить доступ к другим функциям; однако следует отметить, что UnusedCSS работает только с запущенными веб-сайтами, поэтому он бесполезен на этапе тестирования.
2. PurifyCSS
3. PurgeCSS
PurgeCSS был вдохновлен PurifyCSS, поэтому выглядит очень похожим, но он немного более оптимизирован и интуитивен в использовании. Он сравнивает контент с вашими CSS-файлами и удаляет селекторы, которые не задействуются. Единственным серьезным недостатком является то, что вы должны вручную задавать белый список CSS, что может стать головной болью, если ваш сайт использует определенные плагины, такие как HTML-формы.
4. UnCSS
UnCSS отличается от PurgeCSS тем, что рассматривает фактические веб-страницы, а не отдельные файлы, но он медленнее и требует больше ручной настройки. UnCSS является наиболее полезным при использовании с другими инструментами. Например, вы можете комбинировать UnCSS с Grunt и Node.js для автоматизации удаления неиспользуемых CSS.
Альтернативные методы удаления CSS
Многие инструменты веб-аудита предлагают оптимизацию CSS как часть процесса. Также постоянно появляются новые инструменты для удаления неиспользуемого CSS, поэтому не бойтесь экспериментировать. Более старые версии Opera и Firefox поддерживают надстройку под названием Dust Me, которая обнаруживает неиспользуемый CSS, но с 2015 года она не поддерживается. К счастью, Mozilla в настоящее время работает над новым инструментом под названием CSS Coverage, который поможет разработчикам оптимизировать свой CSS.
Предостережения относительно удаления неиспользуемого CSS
Инструменты, рассматриваемые в этом руководстве, не идеальны. Существует несколько различных методов определения незадействованных селекторов CSS; однако сопоставление селекторов с элементами в DOM может быть сложным, если у вас есть элементы, зависящие от API и сторонних скриптов. Если вы хотите попробовать удалить неиспользуемый CSS вручную, то вам нужно быть более осторожным, чтобы вы случайно не сломали приложение, удалив что-то важное. Тем не менее, вы должны знать свой сайт лучше, чем кто-либо другой, а функция аудита DevTools может предоставить некоторую ценную информацию, которая поможет вам создать более лаконичный CSS с самого начала.
Несложно понять, что любому веб-разработчику хотелось бы взять некую утилиту, запустить её, и удалить тот ненужный CSS, о котором она сообщит. Пара минут — и сайт ускорен. Но не всё так просто. Автор этого материала полагает, что к подобным инструмента стоит относиться со здоровым скептицизмом. Ни один из них не лжёт разработчику. Эти инструменты обычно просто не обладают достаточным объёмом информации, позволяющим им выдать результаты, которым можно безоговорочно доверять. Но это не означает, что такими инструментами невозможно пользоваться. Не значит это и того, что от неиспользуемого CSS никак нельзя избавиться. Обсудим это.
Зачем избавляться от неиспользуемого CSS?
Я полагаю, что главную причину, по которой кому-то может понадобиться избавиться от неиспользуемого CSS, можно описать с помощью следующего примера. Предположим, вы пользуетесь CSS-фреймворком (вроде Bootstrap), и в ваш проект попадает весь CSS-код этого фреймворка. А реально в проекте применяется лишь небольшая часть такого кода. Как избавиться от всего ненужного?
Я могу проникнуться чувствами того, кто оказался в подобной ситуации. CSS-фреймворки часто не дают разработчикам простых способов выбора именно тех возможностей, которые применяются в конкретных проектах. При этом доведение исходного кода фреймворка до состояния, идеально соответствующего некоему проекту, может потребовать от команды такого уровня опыта, которого у неё может и не быть. Подобная ситуация уже сама по себе может стать причиной поиска фреймворка.
Анализ ситуации с помощью инструментов разработчика Chrome
Инструменты разработчика Chrome, вкладка Coverage
Здесь я вижу, что не используются 70.7% моего файла style.css . Я так думаю, что ничего плохого в этом нет. Оставшаяся незадействованной часть CSS используется на каких-то других страницах сайта. На этом сайте я не использую некую большую библиотеку стилей. Я сам написал каждую строчку CSS, поэтому я сомневаюсь в том, что в глобальном масштабе сайта 2/3 CSS оказываются не у дел.
Я предполагал, что при работе с вкладкой Coverage можно начать «запись» и побродить по сайту, наблюдая за тем, как процент неиспользуемых ресурсов падает по мере того, как в браузере выводятся различные страницы. Но, к сожалению, при обновлении страницы обновляется и содержимое вкладки Coverage . В результате это средство не особенно полезно в деле выяснения процента использования ресурсов на нескольких страницах. Возможно, это не так лишь в том случае, если анализировать одностраничное приложение.
Мне неприятно это говорить, но анализ сайта с помощью вкладки Coverage оказался практически бессмысленным занятием. То, что я увидел, эти 70.7%, представляет собой ужасную картину, которая играет на моих сомнениях, но ничего конкретного этот анализ мне не даёт, в результате мне остаётся лишь беспокоиться о том, что на моём сайте что-то не так.
Возможно, подобный анализ сайта и будет тем самым механизмом, который наведёт вас на мысль о том, что вам нужно найти и удалить CSS-код, который загружается, но в вашем проекте не используется.
Моя первостепенная проблема
В деле поиска и удаления неиспользуемого CSS-кода меня больше всего беспокоит следующее. Предположим, некто смотрит на результаты анализа и видит неиспользуемые фрагменты CSS.
Неиспользуемые фрагменты CSS
Он думает: «Отлично, удаляю всё лишнее!». Лишнее удаляется, а потом оказывается, что было оно вовсе не лишним, и что его удаление привело к большим проблемам со стилизацией на всём сайте. Вот в чём тут дело: можно быть полностью уверенным в том, что некий CSS-селектор не используется, только если провести изыскания по следующему плану:
- Нужно проверить каждую страницу сайта с помощью инструмента наподобие вкладки Coverage .
- При этом нужно выполнить весь JavaScript-код.
- Сделать это надо со всеми возможными вариантами состояния приложения.
- И, вдобавок, надо всё это проверить и со всеми возможными вариантами используемых медиа-запросов.
Нечто подобное — это слишком сложно для автоматических средств анализа CSS. Они не в состоянии идеально выполнить подобные проверки, особенно если учитывать анализ сайта в ситуации неопределённости. Речь идёт, например, об исследовании проектов в различных браузерных контекстах (разные размеры экранов, разные возможности браузеров, разные браузеры), и об учёте влияния на сайт сторонних библиотек.
А сейчас я хочу показать пример того, как все те проблемы, о которых я только что рассказал, выглядят на практике.
PurifyCSS Online
Вероятно, я уже рассказал достаточно для того, чтобы вы поняли, что я не случайно так мало доверяю подобным инструментам.
Очистка CSS с помощью PurifyCSS как часть процесса сборки проекта
PurifyCSS, вероятно, чаще используется в роли инструмента, применяемого при сборке проекта, чем в роли онлайн-средства для очистки CSS. В документации проекта есть инструкции по его использованию при применении Grunt, Gulp и webpack. Вот, например, обработка файлов по шаблонам:
Такой подход позволяет добиться гораздо большей точности. Материалы сайта, передаваемые на анализ, могут представлять собой список, в который входит каждый шаблон, каждый фрагмент, используемый для построения страниц, каждый JavaScript-файл. Может оказаться так, что подобный список ресурсов непросто поддерживать, но это позволяет учесть всё, что можно учесть. Это, правда, не относится к содержимому страниц, лежащему в неких хранилищах (вроде блог-постов, которые хранятся в базе данных), и к стороннему JavaScript-коду, но, возможно, это в некоторых случаях и неважно, или, может быть, разработчик способен будет как-то учесть CSS-нужды подобных ресурсов.
В документации к конкуренту PurifyCSS PurgeCSS есть предупреждение, касающееся способа обработки ресурсов, используемого PurifyCSS. А именно, речь идёт о том, что PurifyCSS может работать с ресурсами любых типов, а не только с HTML и JavaScript. PurifyCSS в ходе работы анализирует все слова в файлах и сравнивает их с селекторами в CSS-коде. Каждое слово рассматривается как селектор. То есть — множество селекторов может быть ошибочно признано используемыми на сайте. Например, в текстовом наполнении файла, в обычном предложении, может присутствовать слово, соответствующее некоему CSS-селектору.
Об этой особенности PurifyCSS стоит помнить. Этот инструмент ищет CSS-селекторы в материалах сайта, применяя предельно простой алгоритм. Это, с одной стороны, толковая идея, а с другой — это довольно-таки опасно.
Сервис UnusedCSS
Ручная настройка некоего инструмента, проводимая так, чтобы этот инструмент проанализировал бы каждую страницу, чтобы он рассмотрел её со всех возможных точек зрения, это, конечно, скучная рутина. При этом такая работа должна проводиться на ежедневной основе, так как анализируемые сведения о сайте должны пополняться новыми данными по мере развития проекта. Существует один онлайн-сервис, который называется UnusedCSS. Он самостоятельно обходит страницы сайта, избавляя разработчика от массы однообразной работы. Этому сервису достаточно передать единственную ссылку на сайт.
Сервис, кроме того, позволяет загрузить файл с очищенным CSS-кодом и предлагает возможности по управлению содержимым этого файла. Например, это включение и отключение селекторов, которые разработчику хотелось бы или не хотелось бы добавлять в CSS-код. Предположим, разработчик видит имя класса, которое, по мнению UnusedCSS, на сайте не нужно, но разработчик совершенно точно знает о том, что без этого имени класса он обойтись не может. В результате ошибочно признанный ненужным код можно отметить как нужный. Среди других возможностей UnusedCSS можно отметить работу с префиксами и удаление дублирующихся селекторов.
Мне очень понравилось то, что UnusedCSS дал мне гораздо более точные результаты, чем другие инструменты. Однако в данных, выдаваемых этим сервисом, слишком много «шума», и я, к тому же, пока не знаю о том, как включить UnusedCSS в регулярно повторяющийся процесс сборки проекта и вывода его новых версий в продакшн.
Делать это вручную довольно сложно, да и не нужно. Есть способы данный процесс автоматизировать. Часть из них у меня не сработала, за что-то нужно было платить и я посчитал это излишним. В итоге я воспользовался полуавтоматическим методом, о котором и напишу в ближайших нескольких абзацах. Забегая вперед скажу, что уменьшить размер файла CSS удалось чуть ли не в два раза, что меня даже несколько удивило.
Варианты поиска ненужных для работы сайта CSS стилей
Как-то я уже писал, как объединить все файлы стилей в WordPress в один. По сути, нужно просто отключить файлы стилей некоторых плагинов, которые автоматом их добавляют между тегами Head в код каждой страницы сайта. Ну, а строки со стилями из этих файлов нужно перенести в основной — у меня он называется STYLE.CSS и живет в папке с используемой темой оформления.
Вот именно этот файл стилей я хотел оптимизировать, т.е. убрать из него все, что не используется при загрузке страниц сайта. Логично было предположить, что лучше всего с разбором кода справится браузер, что, собственно, не было лишено смысла.
В сети я нашел несколько рекомендуемых для этого дела плагинов. Остановился на плагине для Фаерфокса под названием Dust-Me. Он в реальном времени делает разбор открытой в браузере страницы мгновенно выявляя те селекторы CSS, которые оказались не используемыми для ее отрисовки.
Но этого, как вы понимаете, мало для того, чтобы выносить вердикт этим селекторам. Ведь они могут использоваться на других типах страниц вашего сайта. Что делать? Проверять их все вручную? Вовсе нет. Dust-Me умеет работать с картой вашего сайта вида сайтмар xml — достаточно будет только указать путь до нее:
Как видите, у меня в sitemap.xml около 1000 страниц и плагин успешно начал их сканирование. Примерно через сотню другую страниц он у меня затыкался и приходилось нажимать на паузу, а потом его повторно запускать.
Данный метод всем хорош, ибо позволяет проверить абсолютно все страницы своего сайта, чтобы точно знать, что лишние CSS селекторы нигде не используются и не понадобятся. Проблема в том, что Dust-Me для моего STYLE.CSS в итоге выдал ошибку при показе неиспользуемых строк (селекторов). Может быть ему не понравилась его компрессия или еще что помешало, но факт остается фактом.
Однако, пока я ждал их ответа, нашел бесплатный и довольно простой способ самому в течении пяти-десяти минут убрать лишнее из файла стилей в полуавтоматическом режиме. Помог мне в этом совершенно бесплатный сервис, где весь процесс довольно подробно описан на приведенной по ссылке странице:
Суть метода удаления неиспользуемых стилей заключается в следующем:
- Открываете содержимое вашего файла стилей, например, загрузив файлик STYLE.CSS (или как он там у вас обзывается) по ФТП к себе на компьютер. Копируете все его нутро в буфер обмена и вставляете в окно верхнего текстового поля на приведенной странице сервиса.
- Проделываете ряд итераций с помощью браузера Хром и инструментов разработчика в нем спрятанных (открывается панель инстументов, например, по нажатию на F12 на клаве).
- Получаете на выходе «чистый» CSS код, которым можно заменить старое содержимое файлика стилей.
Методика очистки CSS файла от совсем ненужных селекторов
Вся соль как раз в манипуляциях проводимых в браузере. Открываете сначала в нем любую страницу сайта, запускаете «инструменты разработчика» (F12) и проделываете следующее: «Audits» → «Reload Page and Audit on Load» → «Run» → разверните «Web Page Performance» → разверните «Remove unused CSS rules» → разверните ваш CSS файл → скопируйте все что появилось в буфер обмена.
Выглядит все это примерно так:
Т.е. просто переставляете галочку в указанное место и жмете на запуск. По окончании процесса находите под спойлером «Remove unused CSS rules» название вашего файла стилей (у меня это STYLE.CSS) и кликаете по нему. Все CSS селекторы, которые не используются для отрисовки данной страницы, будут там приведены в столбик:
Копируете их все (от первого до последнего) в буфер обмена и вставляете в окно сервиса, помеченное на приведенном выше скриншоте цифрой 1. Т.к. это данные только с одной страницы вашего сайта, то делать по ним выводы еще рано. Поэтому повторяете все то же самое с десятком других страниц своего сайта, чтобы охватить весь их возможный набор: статьи, список рубрик, статические страницы, страницы с таблицами, страницы с оформленным кодом, страницы со списками и т.п.
Все полученные в этих итерациях списки неиспользуемых стилей (на разных страницах вашего сайта) вы по очереди вставляете в окно, помеченное на скриншоте цифрой 2, и каждый раз после этого жмете на расположенную чуть правее желтую кнопку «Оставить неиспользуемые стили. »
Сервис таким образом сравнит CSS стили неиспользуемые на всех протестированных вами страницах и удалит из общего списка те, что участвовали в прорисовке хотя бы одной страницы. Чем больше страниц вы проверите, тем лучше. Когда надоест — жмите на кнопку «Удалить неиспользуемые стили» и копируйте появившееся в нижнем текстовом поле содержимое вашего обновленного (очищенного) стилевого файла.
Лично я сначала сравнил его содержимое с оригинальным файлом STYLE.CSS в Нотепад++ с помощью плагина Compare. Все удаленные из оригинала строки (у меня в каждой строке записано по селектору, чтобы уменьшить общий размер файла) подсветятся и можно будет на вскидку проанализировать целесоображность их удаления.
Никаких нареканий у меня удаленные селекторы не вызвали (они остались в STYLE.CSS от старых экспериментов или уже неиспользуемых плагинов). В итоге число строк (селекторов) у меня в файле стилей уменьшилось с почти 600 до чуть более 300. А итоговый вес файла снизился до 25 килобайт (менее 10 с учетом его gzip сжатия при передаче с сервера до браузера).
Замена файла стилей (его содержимого — старое удалил, а новое вставил, после чего сохранил изменения через файлзилу) на новый (покоцанный) видимых изменений на сайте не вызвало (пока, во всяком случае, не выявил). В общем, я очень доволен и рекомендую попробовать. Быстро, просто и удобно (а так же бесплатно).
Комментарии и отзывы (7)
А проще всего завести трафарет и на каждый новый стиль включать в него пример. Ошибки в css сразу отражаются в трафарете.
Добрый день. Отличный и актуальный материал, как всегда, спасибо.
Возник вопрос, у меня сайт на движке Ворд пресс, подключаются стили css из нескольких файлов, (один основной style.css) и файлы стилей плагинов (форма связи, капча и т.д.). Как правильно находить неиспользуемые строки в таком случае,отдельно для каждого файла стилей находить места которые не используются? И что лучше сделать первично, определить неиспользуемые части каждого файла стиля, или сначала объединить все стили в один?
Александр: Здравствуйте! Ну, все же лучше все файлы объединить в один, ибо не сложно, а выигрыш в скорости загрузки не помешает. Смысла оптимизировать отдельные файлы стилей плагинов особо нет, ибо при их обновлении все можете переписаться, как было до оптимизации. ИМХО,
А после попробуйте посмотреть как выглядит ваш сайт на мобильном. Ляпота.
Отличный текст, спасибо! Но для обычного юзера тяжеловато. Я купил шаблон одностраничника. PageSpeed Insights на старте 24. После оптимизации картинок и включения сжатия стало 67. Но этого мало. Гугл ругается на стили. Надо удалить неиспользуемые стили из CSS файла сайта — одностраничника. Сколько возьмете за эту работу?
Статья вроде свежая, а плагина Dust-me нет для FF, и бесплатный сервис временно не работает. (((
у меня сайт WordPress и много неиспользуемых CSS. У меня это в первый раз и не как не разбираюсь как или откуда начать чтоб их найти очистить и подменить. Прошу помощь, буду благодарен.
В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из этих библиотек предназначены для удаления неиспользуемого CSS. Как автор PurgeCSS и участник PurifyCSS, я хочу воспользоваться моментом и объяснить, какие проблемы могут решить эти библиотеки, и сравнить три самые популярные библиотеки для выполнения этой работы.
Зачем пользоваться библиотекой для удаления ненужного CSS?
Как и c любой библиотекой, всё зависит от вариантов использования, и бывают ситуации, когда их применять не имеет смысла. Наиболее распространенный вариант применения упомянутых нами библиотек — удаление неиспользуемого CSS с помощью CSS-фреймворков.
CSS-фреймворки
Мой опыт работы с Bootstrap в прошлом был не слишком приятным главным образом потому, что я применял CSS-фреймворки к небольшим веб-сайтам. Одна-единственная статическая страница всегда выходила слишком раздутой. Bootstrap предлагал возможность зайти на сайт и выбрать, какими функциями воспользоваться для загрузки обрезанной версии своего CSS-фреймворка. Опыт разработчиков оказался плохим.
Для сравнения, у TailwindCSS есть возможность воспользоваться Purge CSS для автоматического удаления невостребованного CSS. С TailwindCSS вы редко задаетесь вопросом: не переключиться ли на другой фреймворк для обрезки сайта. И вам редко приходится менять настройки, чтобы отключить правила.
Устаревшие веб-сайты
Другой пример — устаревшие сайты, вышедшие из-под контроля. Можно запросить разработческий ресурс, чтобы прибрать беспорядок, который накопился в CSS, но можно и взять инициативу на себя, для начала воспользовавшись этими библиотеками. Они сразу же добавят ценности вашему сайту и помогут идентифицировать неиспользуемый CSS.
Критические страницы
В некоторых компаниях есть разные команды, которые присматривают за разными частями веб-сайта. Одна команда может отвечать за главную страницу приложения, другая — за страницы регистрации и оплаты, а третья — за страницы настроек и администрирования.
В таких ситуациях команды не всегда видят код друг друга. Они могут выбрать общий CSS-фреймворк и не удалять из него никаких CSS, чтобы воспользоваться преимуществами кэширования. Но для критических страниц всё же должно делаться исключение.
Обзор и сравнение
PurgeCSS
Вот как работает PurgeCSS. Во-первых, мы смотрим на содержимое нашего сайта, то есть на все, кроме стилей. Для простого проекта это могут быть файлы HTML и JavaScript. Мы хотим получить из этого содержимого список селекторов, которые могут применяться в CSS. Глядя на изображение ниже, можно увидеть, где находятся селекторы:
Как только у нас появляется список, начинается первичный процесс. Мы разбираем CSS-файл с помощью PostCSS. Затем пройдемся по абстрактному синтаксическому дереву (AST), рассмотрим каждое правило и проанализируем селекторы, которые его составляют. Если мы замечаем селектор, которого нет в списке, то это означает, что он не востребован, и мы удаляем правило.
В приведенном выше CSS-файле PurgeCSS перебирает правила, начиная с p . p присутствует в списке, и поэтому его удалять не надо. Что касается text-transparent , это правило не отображается в списке и, следовательно, удаляется:
PurgeCSS предоставляет возможность создания экстрактора. Экстрактор — это функция, которая берет содержимое файла и извлекает список задействованных в нем CSS-селекторов. Он позволяет удалять ненужный CSS более точно.
Вы можете указать, какие экстракторы использовать для каждого типа файлов, что приведет к повышению точности результата. Но пользоваться определенными экстракторами необязательно, и вы можете положиться на вариант по умолчанию.
PurifyCSS
PurifyCSS работает аналогично PurgeCSS. Она анализирует файлы, содержимое и CSS по отдельности, но может работать с любыми файлами, а не только с HTML или JavaScript.
Однако главный недостаток PurifyCSS — отсутствие модульности. По сравнению с PurgeCSS, здесь по существу есть только один определенный экстрактор, который нельзя менять. Экстрактор PurifyCSS принимает каждое слово отдельно и основан на некоторых случаях использования.
В качестве примера возьмем hello-world . Экстрактор PurifyCSS предназначен для работы с JavaScript, где можно объединять строки, чтобы сформировать имя класса. По этой причине он будет видеть hello и world как актуальные имена классов вместо hello-world .
Поскольку каждое слово считается селектором, многие селекторы могут быть ошибочно истолкованы как задействованные. Эта библиотека также не будет работать со специальными символами, которые часто применяются служебными CSS-фреймворками.
UnCSS
UnCSS подходит к проблеме по-другому. Вместо того, чтобы анализировать файл, эта библиотека пытается открыть сайт и искать селекторы в ваших CSS-файлах. Как указано в README, UnCSS начинает с загрузки файлов с помощью jsdom и выполнения JavaScript. Так открывается возможность работать с одностраничными приложениями React, которые не имеют HTML.
Затем PostCSS анализирует все таблицы стилей. UnCSS просматривает список селекторов, определенных в таблицах стилей, и запускает на сайте document.querySelector . Если функция не находит селектор, он удаляется из CSS.
Благодаря эмуляции HTML и выполнению JavaScript UnCSS эффективно удаляет неиспользуемые селекторы из веб-приложений.
Однако такая эмуляция чревата издержками с точки зрения производительности и практичности. Чтобы удалить ненужный CSS из файлов шаблонов плагинов, нужно будет преобразовать Pug в HTML и эмулировать страницу внутри jsdom. Только после этого UnCSS сможет запустить для каждого селектора document.querySelector .
Бывает еще и так, что элементы изначально отсутствуют. К примеру, на вашем сайте необходимо нажать на кнопку, чтобы появилось модальное окно или раскрылся другой раздел.
UnCSS дает возможность нажатия по элементам на вашем сайте. Но это создает бремя обслуживания. Можно представить это как создание небольшого теста Cypress/Selenium, который проходит через приложение и обнаруживает все скрытые разделы.
На данный момент UnCSS — самый точный инструмент для удаления неиспользуемого CSS. Если вы не применяете серверный рендеринг и у вас простой одностраничный сайт с HTML и JavaScript, эта библиотека должна отрабатывать правильно и превосходить PurgeCSS в том, что касается величины CSS.
Читайте также: