The mythical “unused code” in your web application

Capturing unused JavaScript/CSS code

Let’s face it: unused code has no place in your product. It’s similar to the proverbial junk drawer at your home, but instead of a messy cabinet your users are quite literally paying this code.

This of course begets an interesting question, which is do you know how much code is unused in your application? If you’re similar to me the answer is likely not. To make matters worse it’s either impossible or costly to acquire. Chrome 59, however, now comes with the ability to capture coverage out-of-the-box. Be prepared for a little shock once you get it working, as I was:

All this red 😱

As amazing as this ability is, the tool is cursed with most things in the browser, and that is that automation can be extremely challenging. Consider all the steps one has to hurdle through in order to get these statistics:

1. Start a browser.
2. Load our page/app.
3. Restart the page to begin coverage instrumentation.
4. Do some form of interaction or run through a use-case.
5. Repeat Step 4 n-times to cover all your apps use-cases.
6. Find the buried coverage tab and see how bad things are.

Given the nature of all the various workflows and opportunities for human-error, you can clearly see that this won’t scale well. Which is where Navalia comes in to rescue us.

Navalia

Navalia is a high-level browser API that allows folks like you and me to automate anything browser related, and version 0.0.11 now includes support for instrumenting and collecting code-coverage through Chrome. Using Navalia is a pretty easy task, so fire up your editor and let’s get cracking.

Driving Navalia

Navalia is loaded with features, but let’s start off with something simple: loading the browser and going to a website. In Navalia this is easily achieved:

In just 3 lines of code, we’ve gotten a browser to start-up and navigate without anything more than simply running the script! Let’s go a little bit further and have it do some form of user interaction.

Fairly straightforward, huh? We’re simply booting up Chrome, going to the Navalia doc-site, focusing on an input and entering some text.

But let’s get back to the purpose of this post, and that is to collect metrics on some JavaScript in the page. I’ll use the Google Analytics library as an arbitrary example:

Not too shabby. 12kb is a fairly small hit on the experience for what the library provides, and now that I have a threshold in mind I can begin to make note when major increases occur.

Final Thoughts

With only ~20 lines of code we now have a script that outputs this coverage in a more automated way. From here it’s possible to go further. Below are some interesting examples of what you can achieve with this technology.

• Add a test-cases for coverage thresholds, or even fail application builds if unused code is too high.
• Send an alert of some kind if this percentage increases in a major way.
• Begin adding more uses-cases to the script and start to remove features that no users are even using.

Navalia is also capable of so much more (screenshots, PDF rendering…) and can even run multiple operations in parallel if you have a lot of cases to test. So get started putting your web app on a diet!