Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to analyze JavaScript and CSS coverage across multiple pages/sites

The Chrome Dev Tools JavaScript and CSS Coverage Drawer is pretty neat, except for one thing... It would be nice if it could be left on, and not reinitiate its analysis between pages.

I would like to be able to analyze an entire site, a subset of pages, or a set of websites, and find what is unused amongst them.

I get that it would mean browsing entire projects and using every feature (or setting up tests) to be thorough/precise, but that's not as tedious as what I have to do entirely without such a utility/feature. (And it doesn't seem like you would need to be meticulous to obtain usable or initial observations from a sub-thorough audit. The DevTools utility doesn't facilitate automated tests on its own either.)

The codebase at issue is huge (1.9mb uncompressed on the front end), and (possibly) contributed to by many developers who may or may not have left relics, legacy code, or abandoned dependencies. There is possibly also code that is only relevant in parts of projects, which could reveal opportunities for reducing dependency scope.

Is there a way to begin to crack into code use without a laborious manual deep dive?

It was one of the first things that came to mind when learned about the Google's coverage utility, and I assumed it would be capable of analyzing multiple pages collectively, but it doesn't.

Is there anything else that does this? Does any utility exist that can search an entire site or multiple pages and find unused JS and CSS?

Side note: The CSS is in SASS. For that and other reasons I may need to manually analyze the results and improve the code, which is trivial comparatively, so I'm not looking for a feature to automate code improvements. It's a similar situation with the JS which is minified.

This is not a request for a recommendation on poduct/software. It is asking if task X is possible, which is technically answerable with a yes or no.

UPDATE: It does seem like there are utilities for CSS, but still nothing found for JS.

like image 798
BBaysinger Avatar asked Apr 10 '26 00:04

BBaysinger


1 Answers

For Static Analysis:

  1. Try unusedcss.com to analyse unused CSS code across the entire website. More - Helium CSS
  2. Try deadfile which is a simple util to find deadcode and unused files in any JavaScript project.

For Dead-code Removal:

  1. Try purgecss to remove unused CSS code from your project.
  2. Try Google's closure compiler which parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left.

That being said, detecting unused code is a hard problem to solve, because there are countless ways to invoke a given piece of code. Hence, these tools wisely and with your best judgement.

like image 75
Pankaj Parashar Avatar answered Apr 11 '26 15:04

Pankaj Parashar