Причины возникновения проблемы

Почему со временем в проекте накапливается всё больше неиспользуемого JavaScript кода:

1. Удалили старый функционал, а код, которые он использовал, не подчистили. Например, был на главной слайдер, его удалили. Но код подключения плагина слайдера остался.

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

3. Проекту больше 2 лет и в нём накопились технические долги. Например:

• Куски кода, относящиеся к старой вёрстке.

• Плагины, подключённые глобально на весь сайт, вместо адресного подключения на нужных страницах.

• Просто лишний код, непонятно откуда взявшийся и непонятно что делающий.

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

2. Сайт откровенно тормозит на мобильных устройствах. Хотя объём загружаемых данных не более мегабайта и количество загружаемых файлов не более 30.

3. Есть один или несколько JavaScipt файлов от 2000 строк, которые подключаются на всех страницах сайта.

Если вы узнали свой проект в приведённых выше случаях, то добро пожаловать в эту статью. В ней я познакомлю вас с инструментом, который упростит поиск и чистку неиспользуемого JavaScript кода.

Принцип работы сервиса

Сервис определяет, какие участки кода были выполнены в браузере. То есть, какие строки кода непосредственно исполнялись процессором. Если код не использовался, то он помечается как лишний.

Разумеется, возникает множество ложноположительных срабатываний. Например, когда JavaScript код исполняется в зависимости от действий пользователя: клик по кнопке, отправка формы и т. д. Но мы придумали методику и разработали вспомогательный сервис, которые в разы ускоряют работу с такими случаями.

Начало работы с сервисом

Видеоинструкция: ВК видео, Youtube, Дзен, Rutube.

Подготовительная фаза заключается в следующих шагах:

1. Отключите минификацию кода. Минифицированный код трудно читаем и с ним очень сложно работать. А вам предстоит читать и модифицировать код.

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

3. Подберите список разнотипных страниц для сканирования. Однотипные страницы идентичны c точки зрения функционала. Например, все карточки товаров — это 1 тип. JavaScript код у этих страниц идентичен и выполняет одинаковые функции. Разнотипные страницы — это главная, корзина, каталог товаров, карточка товаров, запись в блоге, страница форума, калькулятор расчёта стоимости товара, страница с календарём событий и т.д. То есть, функционал и состав JavaScript файлов у этих страниц сильно различается.

4. Далее запустите сканирование.

Предварительная оценка удалённого кода

Пробегитесь визуально по результатам сканирования. Буквально за 15–30 минут вы сможете найти:

1. Неиспользуемые плагины. У них будет указана степень сокращения кода близкой к 90%.

2. Большие куски бизнес-логики, которые заведомо не используются. Например:

• По селектору выбираются элементы, которых точно нет на странице, но на них вешается обработчик события.

• Объёмные вспомогательные функции, вызов которых либо отсутствует в коде, либо закомментирован. То есть, функции, название которых нигде не встречается.

Этот этап поможет вам погрузиться в код перед ручной чисткой.

Ручная чистка

Это самый объёмный этап. Он простой, но объёмный. Все действия в нём рутинны и повторяются по кругу из раза в раз. Он требует доскональное тестирование всего сайта.

Сервис сгенерирует для вас специальные отладочные JavaScript файлы. Они модифицированы следующим образом:

• Код каждой неиспользуемой функции закомментирован.

• В каждой из этих закомментированных функций проставлен маяк. Этот маяк выведет сообщение в консоль браузера, в случае, если функция будет вызвана.

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

Загружаем файлы

1. Скачайте файлы на ваш компьютер.

2. Удалите из папок JavaScript файлы плагинов и сторонних библиотек. Их оптимизация нерентабельна. Например, удалять неиспользуемые функции из jQuery нет смысла, так как через несколько месяцев вы наверняка столкнётесь с тем, что вам надо вернуть часть удалённого кода. При этом jQuery очень объёмный файл и его отладка займёт продолжительное время. Рекомендуем оптимизировать вашу работу и сфокусироваться на коде, написанном специально для вашего сайта? и несложных библиотеках вроде слайдеров.

3. Загрузите на вашу разработческую площадку файлы, которые сформировал для вас сервис. Все файлы имеют ту же структуру директорий (папок) что и на вашем сервере. Поэтому можете просто скопировать файлы с заменой.

Восстанавливаем работоспособность

Это самый объёмный и рутинный этап. Вам по кругу нужно будет делать 2 вещи:

1. Открываем страницу, выполняем какое-нибудь действие. Например, положить товар в корзину, заполнить форму, оставить комментарий, проголосовать за рейтинг.

2. Смотрим консоль браузера. При появлении маяка ищем этот маяк и раскомментируем кусок кода.

3. Повторить действие 100 и более раз :-) Просто тестируем весь сайт, всего его функции и раскомментируем код там, где сработал маяк.

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

Чистим код

После того как функциональность сайта восстановлена, вам остаётся найти все оставшиеся маяки и удалить закомментированные куски кода.

Чтобы найти все маяки, просто запустите поиск в вашем проекте по слову «QSU_».

Итог

После примерно недели работы вы получите:

• Ускорение сайта за счёт избавление от лишнего JavaScript кода.

• Вы досконально изучите код на практической задаче. После этого вы будете знать код? как свои пять пальцев.

Рекомендации

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

• Проверьте сайт в полном чеке. Он проверит неиспользуемый код на всех страницах сайта, а не только на разнотипных. Это поможет не удалить функционал, зависящий от контента. Например, возможность оценить комментарий, когда комментарии есть только у части товаров.

Альтернативные инструменты

В браузере Chromium есть похожий инструмент, который отслеживает вызываемые JavaScript функции прям во время работы. То есть, можно прям во вкладке браузера тестировать функциональность и видеть, какие функции были вызваны, а какие нет.

Этот инструмент заточен под перфоманс аналитику (анализ быстродействия), вместо сканирования всего сайта по следующим причинам:

• В нём нельзя сканировать несколько страниц. При переходе на другую страницу, всё отслеживание неиспользуемых JavaScript функций начнётся заново.

• Наш сервис позволяет работать последовательно. То есть, вы шаг за шагом продвигаетесь, ищете и чистите код: тестируйте одно пользовательское действие, вносите исправление, обновляете страницу, продолжаете тестирование. В Chromium работа сумбурная: вам нужно протестировать работу всей страницы, затем просмотреть все JavaScript файлы, внести массовые исправления, а затем обновить страницу и заново всё протестировать. Разница в том, что в нашем сервисе вы продвигаетесь кусочек за кусочком, а в Chromium вы работаете сразу над всеми файлами одновременно. Легко понять, что с нашим инструментом дело движется быстрее, а главное, легче.

• Процесс работы в Chromium совершенно не продуман и не оптимизирован. Код, отображаемый в консоли, бьютифализирован, то есть изменён по сравнению с файлами с сервера. Из-за этого сложно найти нужный участок кода в IDE. Chromium начинает процесс отслеживания неиспользуемых JavaScript функций заново, при обновлении страницы. В процессе тестирования функционала вы наверняка успеете несколько раз случайно обновить страницу и сбросить прогресс проверки.

Chromium больше приспособлен именно для задачи перформанс аналитики, а не на чистку кода всего сайта. Например, если у вас есть страница с объёмным JavaScript кодом (калькулятор расчёта стоимости товара, виджет онлайн-чата, корзина со сложной логикой группировки товаров), то искать неиспользуемых код лучше через Chromium. Chromium больше подходит для чистки какого-то одного большого JavaScript файла.