Как узнать, действительно ли определен код javascript?
Я выполняю работу по очистке JavaScript в устаревшем проекте и пытаюсь избавиться от избыточных JS-библиотек. Я сделал все очевидные (те, которые нигде не упоминаются). Но есть несколько JS файлов, которые включены во все страницы (через плитки).
Как я могу узнать, используются ли они на самом деле, не дожидаясь содержимого каждого и поиска каждой функции в них? Есть ли более разумный/простой способ сделать это? Это проект на основе java/ Spring, если это поможет, кстати.
Ответы
Ответ 1
Я думаю, что нет простого способа.
Вы можете удалить ссылку script, запустить свой сайт с включенным отладчиком браузера и посмотреть, есть ли ошибка "функция не найдена".
Но вам придется проверять каждую функциональность вашего сайта...
Edit:
Теперь у вас есть функция в инструментах chrome dev, которые могут сделать это для вас:
https://developers.google.com/web/updates/2017/04/devtools-release-notes
1) Откройте меню команд.
2) Начните вводить "Охват" и выберите "Показать охват".
Ответ 2
В одном из последних обновлений из инструментов chrome dev теперь есть вкладка покрытия JS и CSS, которая позволяет вам видеть неиспользуемый код.
https://developers.google.com/web/updates/2017/04/devtools-release-notes
1) Open the Command Menu.
2) Start typing Coverage and select Show Coverage.
Ответ 3
Я бы предложил использовать шпионы для этой задачи. Они используются в TDD для проверки того, вызваны ли функции, поэтому можно было бы утверждать, что на самом деле происходят вызовы.
Если вам повезло, что библиотеки js инициализируются в конструкторе или каким-то другим способом, если это так, я предлагаю вам следить за этими функциями init.
Если нет, вам может понадобиться следить за всеми функциями, но это больно, особенно если у вас большие библиотеки, и в этом случае я предлагаю идти один за другим.
В прошлом я использовал Jasmine или Sinon. JS для этой задачи, следует примеру:
it('should be able to login', function () {
spyOn(authobj, 'isEmpty');
authobj.login('abc', 'abc');
expect(authobj.isEmpty).toHaveBeenCalled();
});
Как только вы настроите шпионы на правильные функции, тогда нужно просто проверить, вызваны они или нет, вы можете позвонить в mixpanel (первый пример, который приходит на ум) с некоторой информацией об этом, поэтому что позже вы можете увидеть, какие функции вызывают, а какие нет.
Ответ 4
Вы также можете попробовать purifycss.
Использование CLI:
$ npm install -g purify-css
purifycss <css> <content> [option]
Options:
-m, --min Minify CSS [boolean] [default: false]
-o, --out Filepath to write purified css to [string]
-i, --info Logs info on how much css was removed
[boolean] [default: false]
-r, --rejected Logs the CSS rules that were removed
[boolean] [default: false]
-w, --whitelist List of classes that should not be removed
[array] [default: []]
-h, --help Show help [boolean]
-v, --version Show version number [boolean]
Ответ 5
Скачать Screaming Frog. Вы можете анализировать до 500 страниц бесплатно. И он показывает вам, где каждая ссылка используется.