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

Question

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.

Worn

Are you only looking for "Analysis" or do you also intend to remove the unused CSS & JS code from the project? – Annecorinne

@PankajParashar, we do intend to remove the unused JS and CSS, but not in an automated way. – Worn

This looks like a variation of the Halting Problem. – Cowden

@Ouroborus, interesting comparison/tidbit. But oof, that would suggest this is an impossible problem. – Worn

...but then I'm not looking for totally hands-free, complete analysis, but if I was, I can see how that may be impossible. – Worn

Note that asking for recommendations of software, tools, etc. is out of scope for Stackoverflow. (I'm surprised the question wasn't closed for this reason before the bounty.) – Cowden

Well it’s not so much asking for a recommendation on a product as it is asking if task X is currently possible. – Worn

Answer 1

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.

Annecorinne

Very helpful. But nothing for just analyzing a traditional, non-JS-framework site? – Worn

... I mean I see what closure compiler does. It may be helpful to me, but it doesn't seem like it will analyze the site as a whole to find dead code; it only factors the JS itself. – Worn

Agreed, that's why I mentioned it's a hard problem to solve and the existing solutions are not perfect. – Annecorinne

I've also come across UNCSS and PurifyCSS. Just adding the body of knowledge here. – Worn