How to Detect Unused CSS or JavaScript in Your Code
How often have we come across situations where your project has a lot of code that may have been used at an earlier stage to build a MVP and then years later it is just lying there because someone did not do a proper job of refactoring it?
‘Often’ would be the obvious answer.
Since the real world applications have various developers working across multiple locations, the task can be equally tedious for a developer who has been working for quite some time on the same codebase or someone who is new to the team. Sounds like an overwhelming job, isn’t it, especially if it is a very large code base with several modules in it.
Here’s where you can breathe easy by using a very powerful tool provided by Google — Chrome DevTools.
Open the DevTools on your Chrome tab by right clicking and inspecting using ‘Inspect’ or pressing F12 from your keyboard.
Press Ctrl + Shift + P on Windows (or Command + Shift + P for Mac users)
Type in ‘Show Coverage’ and the new Coverage tab will open as shown in the screen below:
Click on the reload icon shown in the above text.
The coverage of the code (JavaScript and CSS) will be calculated. Attached below is the sample screenshot of an Angular app that I have been working on.
The coverage tab will give you the Total Bytes, the Unused Bytes and the Usage Visualization categorized by the file type.
The progress bar highlighted in red in the usage visualization progress bar is the unused code. 32% belong to the functions that have not yet executed (or may never execute if that is an unused code in your app) in the vendor.js file.
The progress bar highlighted in the bluish green color around 68% has been executed already. If you look at the image at the bottom left, it shows you exactly that.
Since, in an Angular app, the TS files get bundled and then splits into JS files, I will try and show you the current TS file and the unused (dead) code it contains. Open the current file, using the ‘Sources’ tab. In my case, it is a landing.component.ts file:
The first screenshot shows the lines executed already in bluish green background. The second one shows the lines that may have not been executed still (or may not execute ever which can correspond to a dead code in your app).
In my case, these methods are extra and I do not require them and hence I will be removing them. The coverage of unused code of the vendor.js file decreases to 31.6%. So, the idea behind it is to reduce to the count of Unused Bytes so that your code bundle is optimized and contains the minimal code that is needed. The same can be done for all the CSS files that you have in your project.
The overwhelming job that you were assigned seems now can be resolved quite easily, right?
Conclusion
And there we have it. I hope you have found this article useful. Thank you for reading. Please feel free to provide your comments, suggestions, and any other feedback that may be helpful.
More content at plainenglish.io
