DEV Community

loading...

Find dead code in JavaScript/CSS projects

pioug profile image Gilles ・2 min read

Here are some techniques that I use to find unused code to delete so I keep my projects healthy.

ES Modules

The following modules can find unused files and export statements:

They all have CLI that can be invoked via npx. They require little to no configuration. They don't depend on any sort of bundling tools, so they can be used in most JS projects.

I find the detection reliable. In the worst-case scenario, a bundler can detect when a file or an export is missing at build time.

ESLint

The following ESLint rules help me finding unused code:

It's safe to delete everything that ESLint has detected. The configuration "eslint:recommended" enables those rules.

CSS

For stylesheets, I use this module to find unused CSS selectors:

I assume the reliability depends on the flavor of your code. I used it in AngularJS projects and got a couple of false positives. However, it does help me to identify which areas of the codebase have been neglected.

node_modules

Based on my experience and understanding of package-lock.json using npm v6, re-creating the lockfile (without necessarily updating package.json) can tidy the dependency tree of a project:

rm -rf node_modules package-lock.json
npm install
Enter fullscreen mode Exit fullscreen mode

Installing modules starting from package.json will get you the most updated dependencies (both direct and transitive). When you add or update modules of a project, transitive dependencies are not always updated since they can still satisfy the new constraints. So updating everything may dedupe packages as the likelihood of shared modules increase.

Re-creating a lockfile is risky. It is worth reviewing the diff to understand which packages have changed.

Discussion (0)

pic
Editor guide