Uncss: uncss/uncss: Remove unused styles from CSS

Три библиотеки для удаления неиспользуемого 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, чтобы воспользоваться преимуществами кэширования. Но для критических страниц всё же должно делаться исключение.

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

Обзор и сравнение

PurgeCSS

FullHuman/purgecss
When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss…github.com

Вот как работает PurgeCSS. Во-первых, мы смотрим на содержимое нашего сайта, то есть на все, кроме стилей. Для простого проекта это могут быть файлы HTML и JavaScript. Мы хотим получить из этого содержимого список селекторов, которые могут применяться в CSS. Глядя на изображение ниже, можно увидеть, где находятся селекторы:

Начальные HTML и CSS

Как только у нас появляется список, начинается первичный процесс. Мы разбираем CSS-файл с помощью PostCSS. Затем пройдемся по абстрактному синтаксическому дереву (AST), рассмотрим каждое правило и проанализируем селекторы, которые его составляют. Если мы замечаем селектор, которого нет в списке, то это означает, что он не востребован, и мы удаляем правило.

В приведенном выше CSS-файле PurgeCSS перебирает правила, начиная с p. p присутствует в списке, и поэтому его удалять не надо. Что касается text-transparent, это правило не отображается в списке и, следовательно, удаляется:

Прочитанные селекторы (слева)/Вывод CSS (справа)

PurgeCSS предоставляет возможность создания экстрактора. Экстрактор — это функция, которая берет содержимое файла и извлекает список задействованных в нем CSS-селекторов. Он позволяет удалять ненужный CSS более точно.

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

PurifyCSS

purifycss/purifycss
A function that takes content (HTML/JS/PHP/etc) and CSS, and returns only the used CSS. PurifyCSS does not modify the…github.com

PurifyCSS работает аналогично PurgeCSS. Она анализирует файлы, содержимое и CSS по отдельности, но может работать с любыми файлами, а не только с HTML или JavaScript.

Однако главный недостаток PurifyCSS — отсутствие модульности. По сравнению с PurgeCSS, здесь по существу есть только один определенный экстрактор, который нельзя менять. Экстрактор PurifyCSS принимает каждое слово отдельно и основан на некоторых случаях использования.

В качестве примера возьмем hello-world. Экстрактор PurifyCSS предназначен для работы с JavaScript, где можно объединять строки, чтобы сформировать имя класса. По этой причине он будет видеть hello и world как актуальные имена классов вместо hello-world.

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

UnCSS

uncss/uncss
Remove unused styles from CSS. Contribute to uncss/uncss development by creating an account on GitHub.github.com

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.

UnCSS альтернативы и похожие программы

UnCSS — это инструмент, который удаляет неиспользуемый CSS из ваших таблиц стилей. Он работает с несколькими файлами и поддерживает Javascript-внедренный CSS.

Как?

Процесс, с помощью которого UnCSS удаляет неиспользуемые правила, выглядит следующим образом:

1. Файлы HTML загружаются с помощью jsdom и выполняется JavaScript.
2. Все таблицы стилей анализируются PostCSS.
2. document.querySelector отфильтровывает селекторы, которые не найдены в файлах HTML.
4. Остальные правила конвертируются обратно в CSS.

Пожалуйста, обратите внимание:

• UnCSS нельзя запускать на страницах, отличных от HTML, таких как шаблоны или файлы PHP. Если вам нужно запустить UnCSS для ваших шаблонов, вам, вероятно, следует сгенерировать примеры HTML-страниц из ваших шаблонов и выполнить uncss для этих сгенерированных файлов; или запустите живой локальный сервер разработчика и укажите uncss на это.

• UnCSS запускает только Javascript, который запускается при загрузке страницы. Он не (и не может) обрабатывать Javascript, который запускается при взаимодействии с пользователем, например при нажатии кнопки. Вы должны использовать опцию игнорирования, чтобы сохранить классы, которые добавляются Javascript при взаимодействии с пользователем.

Ссылки на официальные сайты

Официальный сайт Github

Категории

Разработка

DropCSS
DropCSS — неиспользуемый очиститель CSS; он принимает ваш HTML и CSS в качестве входных данных и возвращает только используемый CSS в качестве выходных данных. Ядро — просто минимальный клей между этими удивительными инструментами низкого уровня: • …
Открытый исходный код Бесплатно CSS Self-Hosted

0
Helium CSS
Helium — это инструмент для обнаружения неиспользуемого CSS на многих страницах веб-сайта. Инструмент основан на JavaScript и запускается из браузера. Helium принимает список URL-адресов для разных разделов сайта, затем загружает и анализирует кажду…
Открытый исходный код Бесплатно CSS Self-Hosted
Purgecss
Что такое Purgecss? Когда вы создаете веб-сайт, есть вероятность, что вы используете CSS-фреймворк, такой как Bootstrap, Materializecss, Foundation и т.

Д. Но вы будете использовать только небольшой набор фреймворков, и будет добавлено множество неи…
Открытый исходный код Бесплатно CSS Self-Hosted

0
PurifyCSS
Функция, которая принимает контент (HTML / JS / PHP / etc) и CSS и возвращает только используемый CSS. PurifyCSS не изменяет исходные файлы CSS. Вы можете написать в новый файл, как минификация. Если ваше приложение использует фреймворк CSS, это осо…

Открытый исходный код Бесплатно CSS Self-Hosted

0
uCSS
uCSS предназначен для сканирования (больших) веб-сайтов с целью поиска неиспользуемых селекторов CSS. Особенности uCSS включают в себя: • Найти неиспользуемые селекторы CSS, учитывая базу кода HTML. • Найти дубликаты CSS-селекторов (также, когда HTM…
Открытый исходный код Бесплатно CSS Self-Hosted

[email protected]

выпусков · uncss/uncss · GitHub

Новый выпуск

Есть вопрос по этому проекту?

Зарегистрируйте бесплатную учетную запись GitHub, чтобы открыть задачу и связаться с ее сопровождающими и сообществом.

Зарегистрируйтесь на GitHub

Нажимая «Зарегистрироваться на GitHub», вы соглашаетесь с нашими условиями обслуживания и Заявление о конфиденциальности. Время от времени мы будем отправлять вам электронные письма, связанные с учетной записью.

Уже на GitHub? Войти на ваш счет

UnCSS не понимает селекторы «:where»

#495 открыт 16 февраля 2023 г. автором jakubsmolaga

Ошибка загрузки относительных файлов .js

#491 открыт 15 ноября 2022 г. автором ethaniel

Использование командной строки для локального проекта laravel

#473 открыт 17 февраля 2022 г. автором mmehdizadeh

Чем отличается PurgeCSS?

#472 открыт 16 февраля 2022 г. автором Фредерихорс

При использовании —uncssrc всегда происходит сбой

#468 открыт 4 января 2022 г. автором pamtbaau

Не удается загрузить URL-адреса, заканчивающиеся на ?...

#467 открыт 3 ноября 2021 г. автором WinterSilence

запрос пакет в зависимостях устарел

#465 открыт 23 октября 2021 г. автором JoelShinness-Unity

Uncss вырезает анимацию. Можно ли игнорировать @keyframes?

#464 открыт 12 октября 2021 г. автором 77артурюнусов77

TypeError при parseErrorMessage

#461 открыт 23 июня 2021 г. автором wuxianucw

Добавить соавторов в организацию

#459 открыт 10 июня 2021 г. автором aminya

как установить параметры для получения только мобильного CSS?

#453 открыт 23 апр. 2021 г. автором usabe

uncss не обрабатывает все файлы в повторяющемся конвейере

#445 открыт 30 нояб. 2020 г. автором Фриказоидберг

Пример командной строки с игнорированием

#444 открыт 9 ноября 2020 г. автором siomosp

Возможность игнорировать скрипты?

#443 открыт 3 ноября 2020 г. автором kevincox

[Функция] Поддержка пользовательского сценария запуска для выполнения кода JavaScript

#442 открыто 13 октября 2020 г. автором aminya

[Документация] Рабочие примеры для сборщиков

#440 открыт 7 октября 2020 г. автором аминья

Ошибка jsdom не распространяется на обратный вызов uncss

#433 открыт 13 июня 2020 г. автором emmercm

Объект экспорта Postcss будет запускать uncss только для одного файла css, переданного в

#431 открыт 20 мая 2020 г. автором mikemellor11

Ошибка: не удалось загрузить скрипт: «file:/// — сбой в [17.2 и 17.3] — 17.1 в порядке.

#430 открыт 12 апр. 2020 г. автором Zokor

Непрозрачное сообщение об ошибке по тайм-ауту

#429 открыт 30 марта 2020 г. автором Chaosflaws

TypeError: Невозможно прочитать свойство ‘querySelectorAll’ неопределенного

#425 открыт 18 февр. 2020 г. автором illycz

Параметр «Игнорировать» не работает.

#419 открыт 20 октября 2019 г. автором tonilopezmr

HTML-файлы, установленные в CSS

#417 открыт 11 октября 2019 г. автором vruzin

Ссылки со строкой запроса

#414 открыт 6 сентября 2019 г. автором Lladnari

Игнорировать таблицы стилей без css

#413 открыт 28 августа 2019 г. автором gverger

ProTip! Следите за долгими обсуждениями с комментариями:>50.