OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to Reduce Build Size in React App with CRA Build?

  • Thread starter Thread starter Blank
  • Start date Start date
B

Blank

Guest
I'm trying to optimize the build size of my React app. Currently, I am using gzip compression with the CRA build, without using Webpack or Rollup. My current build size with gzip is 4.6 MB, and without zipping, it's around 19 MB.

During the build process, I receive the following warning message: Build warning

I have already implemented code splitting by adding lazy loading in App.js for some routes. However, I noticed that code splitting reduces resource usage at runtime rather than reducing the overall build size because it increases the number of chunks.

Here's a screenshot from source-map-explorer: Source Map Analysis

From the source map, I can see that Sass is getting included in the production build, even though it is added as a devDependency.

I need help understanding the following:

Why is Sass getting added in the build? Is a 4.6 MB size large for a gzipped build? If yes, how can I optimize it? Can I achieve these optimizations without ejecting or using custom bundle configurations? Additional Context:

I'm using Create React App (CRA) for the build process. I prefer not to eject from CRA or use custom Webpack/Rollup configurations. Any advice or pointers would be greatly appreciated!

I tried code splitting buy using Suspense and lazy, I moved all static assets (images, csv, etc ) to S3 and serving using CDN so static assets are not increasing the build.
<p>I'm trying to optimize the build size of my React app. Currently, I am using gzip compression with the CRA build, without using Webpack or Rollup. My current build size with gzip is 4.6 MB, and without zipping, it's around 19 MB.</p>
<p>During the build process, I receive the following warning message:
<a href="https://i.sstatic.net/F0MzC6UV.png" rel="nofollow noreferrer">Build warning</a></p>
<p>I have already implemented code splitting by adding lazy loading in App.js for some routes. However, I noticed that code splitting reduces resource usage at runtime rather than reducing the overall build size because it increases the number of chunks.</p>
<p>Here's a screenshot from source-map-explorer:
<a href="https://i.sstatic.net/obD01KA4.png" rel="nofollow noreferrer">Source Map Analysis</a></p>
<p>From the source map, I can see that Sass is getting included in the production build, even though it is added as a devDependency.</p>
<p>I need help understanding the following:</p>
<p>Why is Sass getting added in the build?
Is a 4.6 MB size large for a gzipped build? If yes, how can I optimize it?
Can I achieve these optimizations without ejecting or using custom bundle configurations?
Additional Context:</p>
<p>I'm using Create React App (CRA) for the build process.
I prefer not to eject from CRA or use custom Webpack/Rollup configurations.
Any advice or pointers would be greatly appreciated!</p>
<p>I tried code splitting buy using Suspense and lazy,
I moved all static assets (images, csv, etc ) to S3 and serving using CDN so static assets are not increasing the build.</p>
Continue reading...
 

Latest posts

A
Replies
0
Views
1
Aarif Hussain A Nassar
A
F
Replies
0
Views
1
Fahmi Nur Fachrurozi
F
Top