Как узнать, действительно ли используется определенный код javascript?

Я делаю некоторые работы по очистке JavaScript в устаревшем проекте и пытаюсь избавиться от избыточных библиотек JS. Я сделал все очевидные (те, которые вообще не являются ссылками ниоткуда). Но есть ряд JS-файлов, которые включены во все страницы (через плитки).

Как я могу узнать, действительно ли они используются, не проходя через содержимое каждого и искать каждую функцию в них? Есть ли более умный / простой способ сделать это? Это java на основе / Весенний проект, если это поможет кстати.

14
code-cleanup javascript jquery legacy-code

4 ответов

Я думаю, что нет простого способа.

вы можете удалить ссылку на скрипт, запустить свой сайт с включенным отладчиком браузера и посмотреть, есть ли ошибка "функция не найдена".

но вам придется протестировать все функции вашего сайта...

Edit:

теперь есть функция в Chrome dev tools, которая может сделать это для ты:

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Откройте командное меню. 2) начните вводить покрытие и выберите Показать покрытие.

1

одно из последних обновлений инструментов 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.
11

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

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

в прошлом я использовал Жасмин или Синон.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]
0