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

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

Рис. 1

Анализ объема протестированного кода
Анализ объема протестированного кода

Предупреждение

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

Обзор

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

...
<head>
    ...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    ...
</head>
...

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

  • Дополнительный код замедляет загрузку страницы.
  • Если пользователь получает доступ к странице на мобильном устройстве, в дополнительном коде используются данные сотовой связи.

Открытие вкладки "покрытие"

  1. Открытие меню команд.

  2. Начните вводить текст coverage , выберите команду Показать покрытие , а затем нажмите Enter , чтобы выполнить команду. В денежном ящикеоткроется вкладка покрытие .

    Рисунок 2

    Вкладка " покрытие "
    ![Вкладка "покрытие"][ImageCoverage]

Запись покрытия кода

  1. На вкладке покрытие нажмите одну из указанных ниже кнопок.
    • Нажмите кнопку Запуск инструментирования и перезагрузка страницы ,  чтобы просмотреть код, необходимый для загрузки страницы.
    • Instrument Coverage  Если вы хотите узнать, какой код используется после взаимодействия со страницей, щелкните покрытие инструментированного покрытия.
  2. Нажмите кнопку остановить покрытие и выводит результаты  остановить инструментирование и показать результаты, когда необходимо остановить запись покрытия кода.

Анализ объема протестированного кода

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

Рисунок3

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

  • Столбец URL — это URL-адрес анализируемого ресурса.
  • Столбец Type (тип ) показывает, содержит ли ресурс CSS, JavaScript или и то, и другое.
  • Столбец Total Bytes — это общий размер ресурса в байтах.
  • Столбец неиспользованных байтов — это количество байтов, которые не использовались.
  • Последний безымянный столбец — это визуализация общего числа столбцов в байтах и неиспользуемых байтах . Красная область на панели содержит неиспользуемые байты. Зеленый раздел используется в байтах.

[ImageCoverage]: /microsoft-edge/devtools-guide-chromium/media/coverage-console-drawer-coverage-empty.msft.png "Рисунок 2: вкладка "покрытие""
ImageExample: /microsoft-edge/devtools-guide-chromium/media/coverage-sources-resource-drawer-coverage-selected.msft.png "Рисунок 3: отчет о покрытии кода"

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

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