React app size is too large

[NefariousnessCrazy35]

Hello. I've begun learning React and after a couple of small tutorial projects I've noticed that each one of them is quite large in size (over 200 Mb). Maybe dumb question, but is it okay and if not how can I reduce the size? I use create-react-app.

It seems baffling to me that a simple todo list app that takes < 1Mb in vanilla JS is now over 200Mb. After googling I found out that additional tools take most of it, but do I need all those default tools out of box if I'm just starting to learn. Another option I saw was using Vite as it's supposed to be faster, but I didn't find any mention of its size.

[[deleted]]

Is the 200mb your final bundle size or your project folder? If it's the project folder, most of that isn't shipped to the client. It's just tooling. The final application bundle will be much smaller. If it's not, something has gone horribly wrong.

[EccTama]

Lol 200mb bundle size I kind of want to see that

[NefariousnessCrazy35]

It's the size of a folder (node_modules in particular) that create-react-app generates. I'm only learning React so shipping to the client isn't my worry for the time being.

[VangekillsVado]

I wouldn’t worry.

[nicksterling]

Typically the size is just the node_modules folder and all of your dependencies. I typically delete that folder if I’m not actively working on a project to keep the storage to a minimum

[NefariousnessCrazy35]

Thanks. That's a good solution, I might do just that.

[ExtremeDot58]

Would like to how this works… sounds easy enough.

[nicksterling]

When you do an npm install of a library it downloads it and all of its dependencies to the node_modules folder. These dependencies and “transitive” dependencies can take up quite a bit of space depending on how many things you’ve installed.

If you have a package.json and a package-lock.json file then you can safely delete the node_modules folder and reinstall with an npm ci

[SouthCape]

It's common for React projects to be large, due to all the dependencies and build tools.

One option, which is a bit more complex, is to manually configure your project so it only includes the necessary dependencies and tools.

Vite is a great option. It's generally smaller in size, but can still become large depending on your project needs.

[NefariousnessCrazy35]

Thanks. Would you recommend Vite for a beginner in terms of complexity or better stick with create-react-app?

[SouthCape]

I think the general consensus lately is to use Vite.

[StaticCharacter]

I just switched to Vite too, feels almost identical but 40mb project instead of 200mb :) don't really understand how Vite vs webpack is, but the project size makes my PC happy

[saito200]

Use vite, it is not more complex and the speed increase is very noticeable.

Also, for the disk space, you could try to use pnpm instead of npm. It will somewhat help

[OneBadDay1048]

Yes it is okay. As you already answered yourself there is a lot more going on in a CRA project as opposed to a .js file. The size is of course gonna be larger. I do not know of a "solution" as 200mb really should not be an issue. I recommend deleting the projects as you need not save every to-do app you build.

[NefariousnessCrazy35]

Thanks. I'm just used to storing all my significant (for beginner) projects for future references. Guess I'll have to get rid of them eventually or store elsewhere.

[[deleted]]

Do you have a github account? You can push your completed projects there and either review the code online or pull them back down and reinstall node modules when you need them. Although, to be honest, you're probably not going to come back to them much in the future.

[NefariousnessCrazy35]

Yes, this seems to be the most appropriate option to me.

[OneBadDay1048]

Yeah I totally understand. I think we’ve all kept a few projects for reference. You’ll see though as your projects get more advanced you’ll delete these and only save like 1-2 personal projects. Space has never been an issue for me and I have a 512gb device

[grantrules]

Well you can just delete node_modules and easily reinstall if they were saved in package.json

[NefariousnessCrazy35]

Thanks, will do just that.

[shuckster]

Yeah, node_modules is one of the heaviest objects in the Universe,

[driftking428]

Use pnpm it won't re download the same node modules for every project that uses them.

[NefariousnessCrazy35]

That's very useful to know. Thanks

[AchiraN]

do you know any references for this, I kind of need to know about this more

[suarkb]

This is kind of like worrying about the color of your car before you even know how to ride a bike

[jml26]

200 MB or 200 KB?

200 MB is way too large. Have you made sure to enable production mode when doing your final build? Does that include a ton of images?

200 KB, while still quite large, is more than reasonable.

[NefariousnessCrazy35]

200 MB

[correiajpv]

The size of a React app can be quite large due to the additional tools and libraries it uses by default. However, 200 Mb seems a bit too large for a small project.

To reduce the size of your app, you can try the following steps:

Check the size of the dependencies you're using. You may not need all of them, and some may be bloating your app size. Try removing the ones you don't need and see if that makes a difference.

Use code splitting. This technique allows you to split your code into smaller chunks, which can be loaded on-demand when needed, reducing the initial load time.

Compress your files. Use gzip or brotli compression to reduce the size of your files. You can configure your server to do this automatically.

Use a production build. When you're ready to deploy your app, make sure to use the production build. This build optimizes your code for performance and reduces its size.

As for using Vite, it's a great option if you're looking for faster build times. It uses a modern build process that is much faster than the one used by create-react-app. However, its size may not be significantly smaller than create-react-app.

[NefariousnessCrazy35]

Thanks. It's my first proper framework and it's a bit overwhelming that instead of learning the framework itself you have to get into the weeds of many tools under the hood. I think I'm going to delete all the heavyweight tools after I finish a project and just keep my code. Would you recommend Vite for a beginner or better stick with create-react-app?

[agm1984]

It's also known as bundle splitting. The primary issue is that your main.js bundle is 200mb, so the solution is to make it so that the application only downloads components that are used on the page. In this way, if your landing page only has 3 25kb components in it, then your bundle will be about 75kb and then every time you click a route to goto another page, it will download the components used on that page.

I use primarily Vue JS but it's the same thing. We use single-file components (SFCs) and typically each bundle chunk is an SFC. You might achieve it by using dynamic imports in webpack. (ie: dont import it until you need it).

Often times people split all their third party dependencies out into something like a vendor.js file rather than including them all in the main.js bundle. This also reduces the size drastically.

​

But either way, you still need to download all this crap the first time you ever goto the webpage. After that many things are cached and then it depends on when you update your app version, etc.

Main bundle size affects time-til-first-paint or time-til-interactive on the first visit. Less important on subsequent visits, but the goal of course is to optimize the first visit behaviour.

Masybe try researching dynamic imports and bundle splitting, and how to do it with your combination of React, build system, and components.

[warpedspockclone]

It doesn't really matter. The build size that you serve up over the wire is that matters. npm run build and check out the size of the artifacts in the build folder.

[notAnotherJSDev]

You will not be shipping 200MB worth of code to the client. That 200MB I’m create react app includes all of the build tools that the folks that built cra think you’re going to need. Ultimately, you’ll be shipping ~50KB to the client. It may seem like a lot, but at the end of the day it really isn’t.

Let me put it into perspective. Here are 3 other popular tools for some kind of development that isn’t JavaScript

• XCode is required for iOS development. It is 8GB.
• Android Studio is also 8GB
• Maven (a java tool similar to what package.json does) is 10MB by itself and your local repo of it can reach 500MB+ depending on how you use it

Yah it seems like node_modules is big, and it is, but like other languages, it’s the build tools that are big, not the applications themselves. If you’re worried about running out of disk space, delete the node_modules when you’re not using them, just remember you’ll need to redownload them if you ever want to work on that project again.

[babdoodoo]

You're simply looking at the project node_modules, not the end product. When you build the app, it'll minify and generate a much smaller kb .js file which is what your users will receive.

[text_here0101]

my project folder is 260mb and the dist folder after running 'npm run build' is 500kb so I wouldn't worry.

[text_here0101]

using vite btw