This article is not something you might not already know but maybe you might not have it all listed in a one place. There can be more things that I'll surely be missing in this article which I would like you to mention down in the comments so that I can compile another part to this article. And this is a beginner level post.
So let's start on listing the things that I feel one should do before pushing their production build. These are the things that I have used for the react project I have built but they are definitely the points which can surely be helpful in other projects.
1. Clearing all the console.logs that are absolutely not intended for the users. And it's rare that console.logs are there for users.
2. Remove all the commented code which doesn't serves any purpose or in the end is just misleading. Comments are meant for giving extra context to why something has been done not the other way around.
The above screenshot depicts how there is a
useless console logwhich the developer might have used for thetesting purposewhich should beremovedonce everything is wrapped up in development and the project is ready for getting into production.Another thing worth keeping note is the commented code which serves no purpose in the end.
3. Removing all the unused npm packages and libraries that are installed.
4. Deleting all the unused files that are just clogging up.
It might feel overwhelming to find all the unused packages and files manually but don't you worry.
As the diamond cuts the diamond, in the same way we will use another package to remove the dead files.
You can follow the packages below:
depcheck
unimported
5. Check how the build works by serving the build in react. I know that I used to create a build and then push it to staging server to check how it will behave there because I wasn't aware of the fact that React offers this functionality. It's always good to check your build before pushing it to the server.
So basically this is not about improving the code or optimizing it. These things go hand in hand when you are doing development.
The goalπ― of this article is primarily on giving the finishing touch to your React Web App before making it live in the production.
I hope this article was helpful to you. I would be more than happy to receive your feedback on this article. Thanks for your precious time reading this. Stay tuned for more insightful reading by me.π
Top comments (14)
What if we have a single logger service and check the environmnt?
Can you please elaborate?
For number 1. We don't want to log in our console in production. We can create a singleton service and check the environment before logging. By this we followed SRP too..
Nice one. Can you please write an article on it. Or maybe I'll do it when I'm done curating the other articles on my list π
I'd love to, but am so busy these days... I'm sure you'll write a good one until i want to start :)))
Thanks much for posting this.
Welcome Manisha.π
Thanks for commenting. It keeps me fueled up for writing more of such posts.
Sure, appreciate such endeavours always and would love to contribute too.
I'm pretty sure that 1,2 and 3 is been done by webpack (or the responsible plugin) I mean who on earth would delete ALL comments before a production build in ALL files, the comments are there for (almost) a good reason?
Yes Paul. The production build is optimized and the points 1,2, and 3 are handled. However, removing those files that are not in need is also helpful in the sense that if other devs get through your project they don't have to scratch their head to find the reason for their existence. And having these processes already done may improve the time it takes to make the build.
But you are spot on with your pick. Thanks for that.
Do you have any point that you would like to add which we as a dev can do?
Super useful tips! I was just going to build an app for production and didn't even know some of these. Thank you...
I'm super glad to know that the post reached to someone who really was in the same stage. Happy production deployment.π
Super useful tips! Thank you!
for 1 and 2 steps, you could use linting rule for avoid getting that.