Захват неиспользуемого кода JavaScript / CSS

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

Конечно, возникает интересный вопрос: вы знаете, сколько кода не используется в вашем приложении? Если вы похожи на меня, скорее всего, нет. Что еще хуже, приобретение либо невозможно, либо дорого обходится. Однако Chrome 59 теперь имеет возможность захвата покрытия прямо из коробки. Будьте готовы к небольшому шоку, когда все заработает, как это было со мной:

Все это красное 😱

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

  1. Запустите браузер.
  2. Загрузите нашу страницу / приложение.
  3. Перезапустите страницу, чтобы начать инструментирование покрытия.
  4. Взаимодействуйте в какой-либо форме или рассмотрите вариант использования.
  5. Повторите шаг 4 n раз, чтобы охватить все варианты использования ваших приложений.
  6. Найдите вкладку скрытого покрытия и посмотрите, насколько плохи дела.

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

Навалия

Navalia - это высокоуровневый API-интерфейс браузера, который позволяет таким людям, как вы и я, автоматизировать все, что связано с браузером, а версия 0.0.11 теперь включает поддержку инструментария и сбора покрытия кода через Chrome. Использование Navalia - довольно простая задача, поэтому запустите редактор и приступим.

Вождение Навалии

Navalia обладает множеством функций, но давайте начнем с чего-нибудь простого: загрузки браузера и перехода на веб-сайт. В Навалии этого легко добиться:

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

Довольно просто, да? Мы просто загружаем Chrome, переходим на сайт документации Navalia, фокусируемся на вводе и вводим текст.

Но давайте вернемся к цели этого сообщения, а именно к сбору показателей для некоторого JavaScript на странице. Я буду использовать библиотеку Google Analytics в качестве произвольного примера:

Не слишком потрепанный. 12kb - довольно маленький удар по опыту того, что предоставляет библиотека, и теперь, когда у меня есть порог в памяти, я могу начать отмечать, когда происходит значительное увеличение.

Последние мысли

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

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

Navalia также способна на гораздо больше (снимки экрана, рендеринг PDF…) и даже может выполнять несколько операций параллельно, если у вас есть много случаев для тестирования. Итак, начните сажать свое веб-приложение на диету!