Привет всем! У меня есть вопрос по оптимизации веб-приложения. Сейчас я использую вкладку Coverage в инструментах разработчика Chrome для обнаружения неиспользуемого кода CSS и JavaScript. Это очень помогает найти лишние стили и скрипты, которые загружаются, но не применяются на странице.
Проблема в том, что делать это вручную для каждой страницы довольно утомительно. Хотелось бы как-то автоматизировать этот процесс и включить проверку в наши автоматические тесты.
Есть ли способ интегрировать такую функциональность в тесты на Selenium? Может быть, кто-то уже сталкивался с подобной задачей и может поделиться опытом? Буду благодарен за любые идеи и предложения!
Я недавно решал такую же задачу. Взял puppeteer - он умеет получать данные о покрытии кода, как в хром девтулс. Можно написать скрипт, который пройдет по всем страницам и соберет статистику по неиспользуемому коду. Только учти - некоторые стили срабатывают только при действиях пользователя, так что продумай сценарии тестирования. У меня вышло сэкономить 30% размера css файлов.
Попробуй использовать Lighthouse CI. Он автоматически проверяет, есть ли неиспользуемый код, и отлично работает с CI/CD. Также рекомендую заглянуть на webpack-bundle-analyzer и PurgeCSS для очистки неиспользуемых стилей и скриптов. Но будь осторожен с динамическими классами, которые генерирует JavaScript - можно случайно удалить нужные. Настрой белый список для их защиты.
Я использую Playwright с coverage API - работает отлично! Прогоняю автотесты и собираю данные о неиспользованном коде одновременно. Только не забывай проверять разные разрешения экрана - медиа-запросы легко пропустить. Какой у тебя размер проекта?