Поиск «мёртвого» CSS

Автор статьи — Harry Roberts (перевод одобрил).
Оригинальная статья — https://csswizardry.com/2018/01/finding-dead-css/
Переведено — Front&Blog: @mtsymlov


Во время мастер-класса, который я проводил на этой неделе, мне напомнили технику поиска мёртвого CSS в запущенном проекте. Обратите внимание, что я намеренно использую фразу «мертвый CSS» вместо «неиспользуемый CSS». Сценарий, который я описываю, выглядит примерно так:

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

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

 

Как мы узнаем об этом мертвом коде? Инструменты, такие как uncss , хотя и очень мощные, не вполне соответствуют концепции. Нам нужно найти RUM-решение, которое покажет , какой код в действительности видят пользователи на экране реального сайта.

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

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

Первое, что вам нужно сделать, это начать с гипотезы: какой именно участок кода вы считаете мертвым? Определите селектор CSS, который не должен выводиться пользователю (например, #checkout_wrapper).

Затем вам нужно создать прозрачный GIF 1x1px с именем селектора и добавить его в папку dead/: /assets/img/dead/checkout_wrapper.gif.

После этого вам просто нужно установить это изображение в качестве фона для нужного селектора в вашем CSS:

Теперь садитесь и ждите. По истечении трех месяцев вам необходимо проверить журналы своего сервера для любых запросов на созданный вами gif. Если записей нет, то значит никто не получал сайт с тестируемым селектором: теперь вы можете удалить его.

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

Конечно, этот метод не закрывает проблему полностью, но всё же он обеспечивает хорошее начало для тестов, а также даёт вам полезные сведения о том, как ваш код выводится в рабочем приложении.

  • Seviq Aimo

    Этот способ удаляет неиспользуемый, но присутствующий функционал, и если какой-то кусок кода не используется, то удалять надо не только css. Можно пойти от обратного, удалять функционал, остальное сделает uncss, вроде даже логичнее выглядит 😀