deadcode.md

WTF is deadcode elimination? How to do it by yourself

Scenario

According to wiki

Deadcode elimination is a compiler optimization to remove code which does not affect the program results.

• Past me: 🤩it is the compiler's job to do deadcode elimination and we, developers, don't have to care anything about it right.
• Me: 🙅🏼It is also our duty, developers, to clean our own 💩.

So how can we do

• Past me: Nah, I know which parts are used and which are not, and we have the good code review process, therefore, everything is under our control.
• Me: shut the fuck up "past me", how can you remember those parts while a few months later, you cannot even recognize they are written by yourself 🤦

Assume that you somehow can remember, that problem still happens when your team becomes bigger.

Again, so how can we detect deadcode, this article is my approach to eliminate and report deadcode automatically, so I can spend more time to drink 🍺.

📌 Recently, my main focus is on javascript, so I will explain how to do in javascript but I think on the high level, you can do something similar with the idea (don't believe me 👅)

Remove deadcode automatically

In order to remove deadcode automatically, solutions are:

• your code editor
• tools which are run after committing your code, merging pr ...

Code editor

My code editor is now Visual Studio Code, it has a lot of extensions which helps us to achieve what we need. The list below is what I am using

• Tslint: https://marketplace.visualstudio.com/items?itemName=eg2.tslint (or eslint) enable autoFixOnSave
• Typescript hero: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

👀 Disclaimer: Visual Studio Code is one of the best code editors now, and I think it is worth taking a try 🤟

✍🏻 I used vim before and decided to use Visual Studio Code for coding javascript. Vim is the most productive editor, therefore, to combine the best of both worlds, I use Visual Studio Code under vim mode.

CI Tool

I haven't tried many tools yet, the only script that I used is before committing my code, running prettier. You can check more details here

Report deadcode

✍🏻You still can use code editor together with extensions like I mentioned above to warning your unused variables, unused functions/methods (tslint, stylelint ...). On the other hand, we can make use of module bundler to report deadcode.

In the last few years, there are a lot of module bundlers which help us split our codebase into small parts and bundle them later (for example webpack, rollup, brunch ...). I use webpack as my module bundler, webpack doesn't officially supports us a way to detect deadcode but providing information based on that we can check whether our code is dead or not. The section below I will describe how to use that information to achieve what we need (I created the plugin if you just want to use deadcode plugin 🙋)

In my opinion, there are two kinds of deadcode and with each kind of deadcode, I will demonstrate how to detect in webpack:

• Unused files
• Unused exports in used files

Unused files

Webpack has the great tutorial which briefs us how to write plugin.

The image below is the dead simple project using webpack 🐤

The image below is what it will output to console via webpack deadcode plugin

Unused exports in used files

At first, I don't know how to solve this 😳 and when you don't know just ask. The webpack core team is really amazing, they guide me how to do

Again, the dead simple of using import, export 🐣

The image below is what it will output to console via webpack deadcode plugin

Conclusion

That is what I know so far to clean our codebase by ourself. If you know other approaches, please share with me 🙇 so as less as possible our own 💩

Thanks for reading!! 🙏