Unused JavasScript code. Search and delete /Alarm website

The old functionality was removed, but the code he used was not cleaned up. For example, there was a slider on the main page, it was deleted. But the connection code of the slider plugin remains.
A bunch of modules are installed in the CMS system. Each of them connects its own JavaScript file. But CMS modules are always created with redundant functionality to cover the needs of the widest possible range of potential users. Therefore, a significant part of their JavaScript code will simply never be used.
The project is more than 2 years old and it has accumulated technical debts. For example:

- Pieces of code related to the old layout. - Plug-ins connected globally to the entire site, instead of an addressable connection on the right pages. - Just an extra code, it’s not clear where it came from and it’s not clear what it’s doing. 1. The project has changed several generations of specialists. All the same problems as in paragraph 3, only the reason for their occurrence is different. 1. The site is frankly slowing down on mobile devices. Although the amount of downloaded data is not more than a megabyte and the number of downloaded files is not more than 30. 1. There are one or more JavaScipt files from 2000 lines that are connected on all pages of the site.

If you found out your project in the above cases, then welcome to this article. In it, I will introduce you to a tool that will simplify the search and cleaning of unused JavaScript code.

How the service works

The service determines which sections of the code were executed in the browser. That is, which lines of code were directly executed by the processor. If the code has not been used, it is marked as superfluous.

Sample code where functions are called and not called. Unused code is highlighted in red.

Of course, there are many false positive positives. For example, when the JavaScript code is executed depending on the user’s actions: clicking on a button, submitting a form, and so on. But we have come up with a methodology and developed an auxiliary service that significantly speeds up work with such cases.

Getting started with the service

Video instruction: VK video, Youtube, Zen, [Rutube](https://rutube.ru/video/bea005ee519dc54f7bac0ce1635e5319 /).

The preparatory phase consists of the following steps:

This code is difficult to modify. Disable minification.

Disable code minification. Minified code is difficult to read and very difficult to work with. And you have to read and modify the code.
Disable code grouping. Sometimes several JavaScript files are combined into one large file to speed up page loading. But during development, this will slow down the work, since it will be difficult to determine the file that needs to be modified.
Select a list of different types of pages to scan. The same type of pages are identical in terms of functionality. For example, all product cards are of 1 type. The JavaScript code for these pages is identical and performs the same functions. Different types of pages are the main page, shopping cart, product catalog, product card, blog entry, forum page, product cost calculator, event calendar page, etc. That is, the functionality and composition of JavaScript files for these pages varies greatly.
Next, run the scan.

The list of pages is indicated on the left.

Preliminary evaluation of remote code

Go over the scan results visually. Literally in 15-30 minutes you can find:

Unused plug-ins. They will indicate the degree of code reduction close to 90%.
Large chunks of business logic that are obviously not used. For example:

- The selector selects elements that are definitely not on the page, but an event handler is hung on them. - Voluminous auxiliary functions, the call of which is either missing in the code or commented out. That is, functions whose name is not found anywhere.

This step will help you dive into the code before manual cleaning.

Manual cleaning

This is the most voluminous stage. It is simple, but voluminous. All actions in it are routine and repeated in a circle from time to time. It requires thorough testing of the entire site.

The service has generated special versions of files for you for easy debugging.

The service will generate special JavaScript debugging files for you. They are modified as follows:

The code of each unused function is commented out.
There is a beacon in each of these commented functions. This beacon will display a message to the browser console if the function is called.

This function, if it is still used, will display the message “QSU_28” to the browser console during tests.

The service does not perform actions on the site, but only opens the page. Therefore, various event handlers, such as clicking on the “put in the trash” button, will not be called. The service will mark them as unused. Next, we will describe how to debug your site and restore functionality.

Upload files

Download the files to your computer.
Delete the JavaScript files of plug-ins and third-party libraries from the folders. Their optimization is unprofitable. For example, it makes no sense to delete unused functions from jQuery, because after a few months you will probably come across the fact that you need to return some of the deleted code. At the same time, jQuery is a very large file and debugging it will take a long time. We recommend optimizing your work and focusing on the code written specifically for your site? and simple libraries like sliders.
Upload the files that the service generated for you to your development site. All files have the same directory (folder) structure the same is on your server. Therefore, you can simply copy the files with the replacement.

Restoring working capacity

This is the most voluminous and routine stage. You will need to do 2 things in a circle:

Open the page, perform some action. For example, put an item in the cart, fill out a form, leave a comment, vote for a rating.
Look at the browser console. When a beacon appears, we look for this beacon and uncomment a piece of code.
Repeat the action 100 or more times :-) Just test the entire site, all its functions and uncomment the code where the beacon worked.

With such simple actions, we are looking for the commented code in vain.

Tip: Enable continuous logging mode in the browser console. Some actions cause the page to refresh, so triggered beacons may disappear. For example, when a user submits a form, the triggered beacons in the form validation code will disappear when switching to a new page.

Clean the code

After the functionality of the site has been restored, it remains for you to find all the remaining beacons and delete the commented pieces of code.

To find all the beacons, just run a search in your project for the word “QSU_”.

Bottom line

After about a week of work, you will receive:

Speeding up the site by getting rid of unnecessary JavaScript code.
You will thoroughly study the code on a practical task. After that, will you know the code? like the back of my hand.

Recommendations

Run a separate check for each type of page to make sure that there are no unused JavaScript plugins on the page.
Check the site in full-check. It will check unused code on all pages of the site, not just on different types. This will help not to remove the functionality that depends on the content. For example, the ability to rate a comment when only a part of the products have comments.

Alternative tools

There is a similar tool in the Chromium browser that tracks the functions called by JavaScript right during operation. That is, you can test the functionality directly in the browser tab and see which functions have been called and which have not.

All code in the Chromium interface has been digitalized. Because of this, it will be more difficult to find it in the IDE by text entry. It will slow down your work.

This tool is sharpened for performance analytics (performance analysis), instead of scanning the entire site for the following reasons:

You can’t scan multiple pages in it. When you go to another page, all tracking of unused JavaScript functions will start again.
Our service allows you to work consistently. That is, you move step by step, search and clean the code: test one user action, make a correction, update the page, continue testing. In Chromium, the work is messy: you need to test the entire page, then review all JavaScript files, make massive corrections, and then refresh the page and re-test everything. The difference is that in our service you advance piece by piece, and in Chromium you work on all files at once at the same time. It is easy to understand that with our tool things are moving faster, and most importantly, easier.
The process of working in Chromium is completely not thought out and not optimized. The code displayed in the console has been updated, that is, changed compared to files from the server. Because of this, it is difficult to find the right section of code in the IDE. Chromium starts the process of tracking unused JavaScript functions anew when the page is updated. In the process of testing the functionality, you will probably have time to accidentally refresh the page several times and reset the verification progress.

Chromium is more suited specifically for the task of performance analytics, and not for cleaning the code of the entire site. For example, if you have a page with voluminous JavaScript code (a calculator for calculating the cost of goods, an online chat widget, a shopping cart with complex product grouping logic), then it is better to search for unused code through Chromium. Chromium is more suitable for cleaning a single large JavaScript file.