Какие файлы javascript НЕ используются при загрузке страницы

Можно ли узнать, какие файлы javascript НЕ используются на веб-странице, без необходимости добавлять консольные журналы или отлаживать их или удалять, чтобы увидеть, не сломались ли вещи?

Я ищу инструмент или командную строку script или плагин firefox и т.д.

Например, допустим, что они включены в заголовок:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/something.js"></script>

На странице вызовы производятся только для функций в functions.js, validation.js и jquery.js. Как я могу знать, что something.js не используется и поэтому может быть безопасно удалено из заголовка?

Я пробовал использовать такие вещи, как FireBug, хром-консоль, yslow и серверные журналы, но все они говорят мне, какие скрипты были загружены, т.е. все из них, а не те, которые были использованы.

Ответы

Ответ 1

AFAIK нет простого механизма обнаружения "этот файл в использовании/не используется", потому что существует много способов вызова, расширения и ссылки на вещи в JavaScript.

Существует множество способов вызова функции, например. в событии click для элемента, операторы eval()... Вы могли бы расширить прототип существующего класса в файле script... и т.д. Кроме того, вы могли бы получать новую разметку через AJAX, чем в включите функции ссылок из определенных включений, что невозможно проверить автоматически, не загружая содержимое.

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

Ответ 3

Только 7 лет:) Также хотелось указать, что вы можете автоматизировать это с помощью Navalia: https://github.com/joelgriffith/navalia.

Вот пример:

import { Chrome } from 'navalia';
const chrome = new Chrome();

async function checkCoverage() {
  await chrome.goto('http://joelgriffith.net/', { coverage: true });
  const stats = await chrome.coverage('http://joelgriffith.net/main.bundle.js');
  console.log(stats); // Prints { total: 45913, unused: 5572, percentUnused: 0.12135996340905626 }
  chrome.done();
}

checkCoverage();

Подробнее здесь https://joelgriffith.github.io/navalia/Chrome/coverage/.

Ответ 4

Приступая к этому из другого направления, вы можете изучить использование (ленивый) загрузки javascript-библиотек. Я не мог сказать, насколько это уместно в вашей ситуации, но я видел упоминание этих двух на прошлой неделе, но не использовал ни одного из них: