Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

695
Views
How to find dead code in a large react project?

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

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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:

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

over 4 years ago · Santiago Trujillo Report

0

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:

  • findead
  • deadfile
  • unrequired

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!