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

Question

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

Я ищу инструмент, скрипт командной строки, плагин 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, консоль chrome, журналы yslow и сервера, но все они говорят мне, какие скрипты были загружены, т.е. все они, а не какие использовались.

Answer 1

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

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

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

Answer 2

Потребовалось всего 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/.

Answer 3

В ответ на мой собственный вопрос, возникающий 7 лет спустя, инструменты Chrome dev теперь имеют именно эту функцию!https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 4

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

• http://plugins.jquery.com/project/lazy (только для отложенной загрузки плагинов jQuery?)
• http://labjs.com/ (не уверен, что загрузка выполняется лениво?)