105

In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.

What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.

Suggestions for general strategies/techniques (other than specific tools) are also appreciated.

Thank you

1
  • 1
    No, im looking for a way to find unused and non-imported code. Thank you for your answer.
    – Sinane
    Jan 11, 2019 at 14:58

8 Answers 8

130

Solution:

For node projects, run the following command in your project root:

npx unimported

If you're using flow type annotations, you need to add the --flow flag:

npx unimported --flow

Source & docs: https://github.com/smeijer/unimported

Outcome: enter image description here

Background

Just like the other answers, I've tried a lot of different libraries but never had real success.

I needed to find entire files that aren't being used. Not just functions or variables. For that, I already have my linter.

I've tried deadfile, unrequired, trucker, but all without success.

After searching for over a year, there was one thing left to do. Write something myself.

unimported starts at your entry point, and follows all your import/require statements. All code files that exist in your source folder, that aren't imported, are being reported.

Note, at this moment it only scans for source files. Not for images or other assets. As those are often "imported" in other ways (through tags or via css).

Also, it will have false positives. For example; sometimes we write scripts that are meant to simplify our development process, such as build steps. Those aren't directly imported.

Also, sometimes we install peer dependencies and our code doesn't directly import those. Those will be reported.

But for me, unimported is already very useful. I've removed a dozen of files from my projects. So it's definitely worth a shot.

If you have any troubles with it, please let me know. Trough github issues, or contact me on twitter: https://twitter.com/meijer_s

5
  • 3
    This is exactly what I needed for my react project. simply run npx unimported in the root of your react app, and get results fast
    – reydelo
    Apr 29, 2020 at 12:54
  • 2
    This is exactly what I need without an ounce of doubt :)
    – Atul Bhatt
    Jun 5, 2021 at 12:57
  • I'm getting Unable to locate entry points for this node project. Please declare them in package.json or .unimportedrc.json error when trying to run this on a react + meteor app. I'm running it on the same level with package.json.
    – Bogdan
    Aug 20, 2021 at 9:00
  • @Bogdan, please note that meteor is only supported if you're not depending on their lazy load mechanism. In other words, you need to have your mainModule defined in package.json. Please create a ticket on the issue tracker if you need dedicated support. github.com/smeijer/unimported
    – s.meijer
    Aug 30, 2021 at 8:32
  • I had issues with deadfile, where it still parses folders I tell it to ignore. Your solution works great, to the point, really nice. Congrats!
    – Will59
    Aug 26, 2022 at 11:30
17

Libraries such as unrequired and deadcode only support legacy code. In order to find the unused assets, to remove manually, you can use deadfile

library:https://m-izadmehr.github.io/deadfile/

  • Out of box support for ES5, ES6, React, Vue, ESM, CommonJs.
  • It supports import/require and even dynamic import.

enter image description here

It can simply find unused files, in any JS project.

Without any config, it supports ES6, React, JSX, and Vue files: enter image description here

9
  • 2
    Just FYI, unrequired does not work for React projects. There are talks in their Github of issues for implementing support for JSX but it currently is not available.
    – dabyland
    Dec 12, 2019 at 15:56
  • 3
    deadfile doesn't work for my .tsx project. I thought it was an issue of project being too big, so I narrowed it down to a directory with 3 files. Stuck for 10 minutes.
    – Ka Mok
    Feb 14, 2020 at 21:11
  • @KaMok same here. Created the issue: github.com/M-Izadmehr/deadfile/issues/6
    – Onkeltem
    Feb 17, 2020 at 16:55
  • 1
    I ran deadfile with my react app and it stuck. It also did not respond with Ctrl + C - so I had to force quit the process to get out of it
    – reydelo
    Apr 29, 2020 at 12:45
  • 1
    @reydelo, seems like deadfile has an issue on TS(X) projects, apparently: github.com/M-Izadmehr/deadfile/issues/6 May 19, 2020 at 23:17
17

Solution for Webpack: UnusedWebpackPlugin

I work on a big front-end React project (1100+ js files) and stumbled upon the same problem: how to find out which files are unused anymore?

I've tested the next tools so far:

None of them really worked. One of the reason is that we use "not standard" imports. In additional to the regular relative paths in our imports we also use paths resolved by the webpack resolve feature which basically allows us to use neat import 'pages/something' rather than cumbersome import '../../../pages/something'.

UnusedWebpackPlugin

So here is the solution I've finally come across thanks to Liam O'Boyle (elyobo) @GitHub: https://github.com/MatthieuLemoine/unused-webpack-plugin

It's a webpack plugin so it's gonna work only if your bundler is webpack.

I personaly find it good that you don't need to run it separately but instead it's built into your building process throwing warnings when something is not ok.

Our research topic: https://github.com/spencermountain/unrequired/issues/6

1
  • 1
    I tried multiple things as well and none worked, I found this solution the best for webpack based projects. Nov 27, 2020 at 11:31
15

First of all, very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.

There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.

1st way WebStorm IDE:

If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor

but it's not works in your particular scenario there is another way to remove the unused code .

2nd Way unrequired Library: (JSX is not supported)

The second way to remove the unused code inside the project is unrequired library you can visit here : unrequired github

another library called depcheck under NPM & github here

Just follow their appropriate method - how to use them you will fix this unused issue easily

Hopefully that helps you

3
  • 24
    Given the question was for React projects, unrequired is fairly useless—it barfs on the first piece of JSX it encounters Jan 15, 2020 at 19:56
  • 1
    @james_womack please explain it more we will improve answer improve together :) Jan 16, 2020 at 3:04
  • 10
    the solution needs to be able to parse JSX imo Jan 17, 2020 at 20:01
7

I think the easiest solution for a create-react-app bootstrapped application is to use ESLint. Tried using various webpack plugins, but ran into out of memory issues with each plugin.

Use the no-unused-modules which is now a part of eslint-plugin-import.

After setting up eslint, installing eslint-plugin-import, add the following to the rules:

"rules: {
  ...otherRules,
  "import/no-unused-modules": [1, {"unusedExports": true}]
}

4

My approach is an intensive use of ESlint and make it run both on IDE ad before every push.

It points out unused variables, methods, imports and so on. Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.

2
  • 1
    Can you please share the ESLint plugins and Webpack plugins you're using. I like this approach better, I tried several of the tools in this post, and none of them worked well. May 18, 2021 at 17:12
  • can you share your configs please, I would like to what you're specifying in your eslintrc rules
    – Lazybob
    Oct 26, 2021 at 10:00
3

findead

With findead you can find all unused components in your project. Just install and run:

Install

npm i -g findead

Usage

findead /path/to/search

enter image description here

2
-4

This question recalls me that react by default removes the deadcode from the src when you run the build command.

Notes: you need to run build command only when you want to ship your app to production.

1
  • Probably not a good solution considering you still want to remove it even if it isn't being used. Don't want to have a bunch of dead files in the source even if it isn't in the built solution.
    – Stockster
    Nov 24, 2020 at 20:23

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.