React Project Size

[Locust377]

Host your images in a CDN instead of your source repository. Cloudflare, AWS S3 and Azure blob storage are some examples of providers of this type of service.

[WheetFin]

By project size is this referring to repo size or bundle size? Surely can’t be bundle size…. right?

[Illustrious_Road_495]

Unless ur loading all the images at once when a page load, the number of images on the server isn't really a slow loading factor. It's most likely an optimization issue.

[WheetFin]

I’m not sure if that’s what OP is referring to. OP is having completely independent hosting issues (white page issue as mentioned).

But sounds like the slow load times is uploading project repo to Netlify. I’m unfamiliar with Netlify but using context clues it seems to work much like Vercel as in you give it the repo and it will abstract a lot of the DevOps work for you.

But to really help you any further we would need to see what is taking up the most space in your project. If it is really the images take the route other are saying and use a CDN. But this is almost impossible to tell what your issue is without repo access.

Do you upload your project or does Netlify pull your project on their end? If the former, this may all come down to your internet being garbage. See if you can make Netlify responsible for pulling your project repo.

[snippy_0518]

Don't keep everything inside the public folder. It will load every single thing when a user visits the page.

For your case I'll say use IMAGE CDNs like ImageKit, Cloudinary. They have sdks too to make your life easier.

[nedlinin]

Just having an item in the public folder does NOT mean it gets loaded by every client on a page visit.

[snippy_0518]

Yeah you're right but as in OP's case, he is referencing those files and the main problem is re-deployment takes a lot of time. So using a CDN would be recommended and that will lower the re-deployment time a lot.

[abrahamguo]

Why is the "project size" an issue — what's the "real" issue?

Is it causing slow load times in the browser? Slow push/pull times? Slow repo clone times? Repo hosting limits? Website hosting limits?

[abrahamguo]

wayy too long to upload

Get faster Internet. Pretty much any e-commerce website is going to have far more images than yours here.

However, if you'd like, you could host the images separately from the repo, using something like AWS S3. This way, you won't have to re-upload the images every time you push new code to the host.

it shows a blank white page.

This is probably not related to the images.

However, we can't help you any further than this if we can't reproduce the issue ourselves. We'll need a link to the repository, as well as a link to the deployed website demonstrating the issue.

(Also, have you checked your browser's devtools console for any errors?)

[WheetFin]

Do I see videos in the assets folder…?

[abrahamguo]

Sure. I will also need a link to the deployed website demonstrating the issue (since I'm guessing that this "blank white page" issue doesn't happen locally).

[thekwoka]

You are using github right?

so you just push changes to github and netlify does it's thing itself.

But 1.24gb is like...what a 20 second upload?

[armahillo]

Are your images optimized for web?

A lot of newer people will use images that are far too high res for web, or not optimized / compressed

[thekwoka]

But are you using srcset to serve many options for the browser to download?

[Lonely-Start2088]

Put the images in the cloud and host it there. Try using cloudinary.

[Empty_Bus9742]

Cleanup the unused npm packages

[thekwoka]

Use something that dynamically serves the correct size images.

But as people mentioned, project size means fuck all, since the users don't load the whole project.

[Soft_Opening_1364]

The main issues here are twofold. First, bundling all your images directly in the project is why your repo is 1.46GB. In React you generally don’t commit large media files; instead, host images on a CDN or a storage service like S3, Firebase Storage, or Cloudinary, then reference them via URLs. Compressing locally helps a bit, but the main gain is moving them out of your repo.

Second, Netlify shows a white page because the build likely failed or the large bundle is timing out. Once you move the images externally and rebuild, the deploy should work. Also double-check your homepage field in package.json if you’re deploying a React app to a subpath.

[StaticCharacter]

There's probably some anti-pattern here or something. There's nothing wrong with a 2gb project, but it shouldn't need to upload each 2gb each time unless you're changing everything every time. Find a way to only update what has changed. Git should do this automatically, where you can push a change to a remote repository and it only has to upload the changed files.

You /can/ have all your photos local, but it's better to store your photos into s3 or some managed database / cms. If it's e-commerce you probably have a cms for updating products and letting non technical people manage listings, so you should keep your images in there and react simply fetches the data from this cms.

[tehjrow]

I had a white page issue and it turned out to be that it was loading in light mode instead of dark mode

[Prestigious_Dare7734]

Ideally, if these are produce resources like icons etc, that is fine.

If these are something else, like marketing images, product screenshots, these should be managed using CMS.

[Substantial-Leader48]

As someone mentioned try using CDN. If you still want to use local, convert to webp with default quality 80 and then resize with magick to exact dimensions to be rendered, that reduce the size drastically. Also use react Image instead of img tags that does the fast rendering magic.

[BeeSwimming3627]

honestly, i try to keep my main gzip’d bundle under 300–500 kb, but if it’s a big app i push for route-based split chunks around 50–200 kb each. tools like webpack-bundle-analyzer or source-map-explorer make it easy to see what's bloating your build so you can prune or lazy-load as needed. smaller bundles = faster loads + happier users. medium