Is it normal that a simple counter react app is more tham 100MB?

Question

I am a newbie with React.js and just for practice i made a simple counter web app. But i noticed that the project is more than 120MB. Is it possible? do i need to do something to shrink it?

Answer 1

120mb can he huge or nothing at all depending on where you get that number. Remember, a modern web app (such as one built with React) needs build tools and often a development server and more. Also, if you are using typescript it will in itself add a compiler that is up towards 40mb.

So if we look at the source directory you'll have your own code plus some build configuration (probably in a webpack configuration file) which totals a few kilobytes. But then we have the node_modules folder which contains all the dependencies for both your own code and the build tools. This isn't a problem and since this folder won't be sent to the client and you shouldn't even commit it to your SCM since it can be restored from your packages.json file.

I did a quick check of the folder size in node_modules in a new dotnet-react project (because that was what I had handy) and this is what I got.

So here we can see that typescript is by far the largest dependency eating up almost 25% of my project and there are still quite a few other large dependencies as well. But this is till just for

If we on other hand look at what is actually delivered to the client that should be a completely different matter. This is what actually matters since this will directly impact the performance of your application. A large app here will be both more code to download and more code to parse for the client.

This same app looks like this when running the project for development and checking network traffic in Chrome Inspector.

So here we can see three script files, but even in development mode only about 520kb is sent to the client even though my node_modules was about 180mb.

If we then go one step further and build this for production we get an even better result.

Now we are down to just about 270kb for the scripts which is just a fraction of the size of the project folder.

So to summarize:

• The size is very well possible and kinda expected when working with a modern client side framework such as React (or Angular, Vue, Ember, etc).
• The development folder will be large due to all the dependencies needed to build your project.
• The final output will be way smaller but in the end depends on what dependencies you decide to use in your own code.
• You don't have to do anything to shrink, just make sure that you don't commit node_modules to your SCM.
• Also remember that all modern frameworks comes with an overhead to set everything up and making it easy to work with. This is most of the 260kb that my test app is. So if you make a simple counter the overhead will be extreme in comparison and not all projects need a framework such as React.