Поиск неиспользуемого кода JavaScript и CSS с помощью средства "Охват"

  • Статья

Средство покрытия помогает найти неиспользуемый код JavaScript и CSS. Удаление неиспользуемого кода может ускорить загрузку страницы и сохранить сотовые данные мобильных пользователей.

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

Обзор

Доставка неиспользуемых JavaScript или CSS является распространенной проблемой при веб-разработке. Например, предположим, что вы хотите использовать компонент кнопки начальной загрузки на странице. Чтобы использовать компонент кнопки, необходимо добавить ссылку на таблицу стилей начальной загрузки в HTML-коде, как показано ниже:

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  </head>
  <body>
    <button class="btn btn-primary">Button</button>
  </body>
</html>

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

Открытие средства покрытия

Чтобы найти неиспользуемый код на странице, используйте средство покрытия :

  1. Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.

  2. В средствах разработки откройте меню Команд. Чтобы открыть меню Command, нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS).

  3. Начните вводить охват, нажмите клавишу СТРЕЛКА ВНИЗ , чтобы выделить команду Показать покрытие , а затем нажмите клавишу ВВОД:

    Всплывающее меню

    Средство покрытия откроется на панели Быстрого просмотра в нижней части devTools:

    Средство покрытия

Объем кода записи

  1. Нажмите одну из следующих кнопок в средстве покрытия :

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

    • Чтобы узнать, какой код используется после взаимодействия со страницей, нажмите кнопку Покрытие инструментом (значок покрытия инструментом).

  2. Чтобы остановить охват кода записи, нажмите кнопку Остановить инструментирование покрытия и показать результаты (Значок остановить инструментирование и показать результаты).

Анализ объема кода

В таблице средства покрытия отображаются ресурсы, которые были проанализированы, и сколько кода используется в каждом ресурсе. Щелкните строку, чтобы открыть этот ресурс в средстве "Источники " и отобразить отчет о покрытии кода, который содержит построчное распределение использованного кода и неиспользуемого кода:

Отчет о покрытии кода

Столбцы в отчете о покрытии кода:

Столбец Описание
URL-адрес URL-адрес проанализированного ресурса.
Тип Содержит ли ресурс CSS, JavaScript или и то, и другое.
Всего байтов Общий размер ресурса в байтах.
Неиспользуемые байты Количество байтов, которые не использовались.
Визуализация использования Визуализация столбцов Всего байтов и Неиспользуемых байтов . Зеленый раздел панели используется в байтах. Красная часть полосы — это неиспользуемые байты.

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.